INPUT提示效果

最新推荐文章于 2023-04-23 17:27:08 发布
最新推荐文章于 2023-04-23 17:27:08 发布
阅读量1k 收藏
点赞数
分类专栏： 网站建设 文章标签： input function xhtml javascript class html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freejs/article/details/3434526
版权
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
http://www.corange.cn//uploadfiles/0922-2_40352.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 20px;
}
.inp {
BACKGROUND-POSITION: -70px -424px;
WIDTH: 150px;
padding: 2px;
border: 1px solid #cedbe3;
color: #FF6600;
}
.inp2 {
BORDER-RIGHT: #84a1bd 1px solid;
BACKGROUND-POSITION: -70px -424px;
BORDER-TOP: #84a1bd 1px solid;
BORDER-LEFT: #84a1bd 1px solid;
WIDTH: 450px;
BORDER-BOTTOM: #84a1bd 1px solid;
padding: 2px;
color: #FF6600;
}
body,td,th {
font-size: 12px;
}
-->
</style></head>
<SCRIPT language=JavaScript>
<!--
function $( id ){return document.getElementById( id );}
function fEvent(sType,oInput){
switch (sType){
case "focus" :
oInput.isfocus = true;
case "mouseover" :
oInput.style.borderColor = '#FF9900';
oInput.style.backgroundColor = '#FFFFEC';
break;
case "blur" :
oInput.isfocus = false;
case "mouseout" :
if(!oInput.isfocus){
oInput.style.borderColor='#cedbe3';
oInput.style.backgroundColor = '#FFFFFF';
}
break;
}
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</SCRIPT>
<body>
姓名： <INPUT name="user" class="inp" onFocus="fEvent('focus',this)" onBlur="fEvent('blur',this)" οnmοuseοver="fEvent('mouseover',this)" οnmοuseοut="fEvent('mouseout',this)">
电话： <INPUT name="tel" class="inp" onFocus="fEvent('focus',this)" onBlur="fEvent('blur',this)" οnmοuseοver="fEvent('mouseover',this)" οnmοuseοut="fEvent('mouseout',this)">
</body>
</html>
piperzero
关注
专栏目录
input 标签实现输入框带提示文字效果(两种方法)
08-29
input 标签实现输入框带提示文字效果（两种方法） 在 HTML5 和 CSS3 的帮助下，我们可以轻松地实现输入框带提示文字效果，而无需使用 JavaScript。这篇文章将介绍两种方法来实现输入框带提示文字效果。 方法一：...
jquery表单input输入框动画提示效果代码
11-11
"jQuery表单input输入框动画提示效果代码"就是一个针对这一目标的设计实践。jQuery库以其简洁、强大的API，使得创建复杂的动态效果变得相对简单，尤其是在处理用户输入时的反馈提示。 jQuery中的`focus`、`blur`、`...
input的使用，input的属性
tjq11111的博客
11-10 670
个人理解:w3c为准 input在以往一直配和label标签使用（label的name属性对应表单的id属性），点击label标签的内容，对应的input会获得页面焦点，并且label标签可以提示用户此处的input表单应填写的内容。 现css3新增属性placeholder逐渐代替了label提示用户input表单应填写的内容。 input常用属性： type：最基本的属性，定义表单的类型 name：最基本的属性，为表单命名 placeholder：占位符 autofocus：...
html input 提示文字
王安的博客
02-23 3957
原文地址：input 提示文字">html input 提示文字作者：王小安input name="passwd_fw" id="passwd_fw" type="password" placeholder="登录密码"  value="" 〉 type=password            提示文字也变成密文   使用  placeholder="登录密码"属性 解决
【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 5698
一、HTML5 新增 input 表单属性 1、required 属性 2、placeholder 属性 3、autofocus 属性 4、autocomplete 属性 5、multiple 属性
HTML|input|placeholder|：focus伪类选择器|backgound|rgba(0-255,0-255,0-255,0-1)|border|padding|margin
weixin_63189859的博客
11-14 495
不过，当盒子不设置宽度时，padding 不会撑开盒子（不会影响实际大小）喔。代码：文本框 作用：主要用于 input表单标签 中获取光标焦点。作用：用于 input表单标签文本框内 文字提示。注意：外边距会影响盒子实际大小，单位：px。作用：主要用于设置背景(没有顺序)注意：一般代码前都带有以下两行代码。注意：内边距会影响盒子实际大小。注意：边框会影响盒子实际大小。作用：设置盒子模型的内边距。作用：设置盒子模型的外边距。作用：设置盒子模型的边框。
Input属性详解
qq_48621951的博客
07-29 1万+
注意radio（单选框）需要value值相等才可以实现单选的功能，value值可以随意设。（1）当inputtype=“text”、“password”、"hidden"时，定义输入字段的初始值；（2）当inputtype=“button”、“reset”、"submit"时，定义按钮上的显示的文本；（3）当inputtype=“checkbox”、“radio”、"image"时，定义与输入相关联的值；1.name属性元素的名称，也就是name的值代表当前input元素的名字；...
jQuery简单实现input文本框内灰色提示文本效果的方法
01-19
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法。分享给大家供大家参考，具体如下： $(function(){ $(.grayTips).each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$...
＜Input /＞输入框及input的相关属性
outstanding木槿
04-23 4546
accept属性用来规定能够通过文件上传进行提交的文件类型。type="button"、"reset"、"submit"用于定义按钮上的显示的文本。readonly属性可与type="text"或"password"的input元素配合使用。type="text"、"password"、"hidden"用于定义输入字段的初始值。type="checkbox"、"radio"、"image"用于定义与输入相关联的值。该属性只能与type="text"或type="password"的input元素配合使用。
input常见属性
whatareyougoo的博客
01-12 1367
type属性：定义input输入框类型，如颜色，日期，单选等等 placeholder属性：用于为input类型的输入框提供相关提示信息，它在输入信息为空时以灰色显示出来而输入框获得焦点时自动消失 required属性：用于在form表单提交数据前，为input类型的输入框规定必须填入数据，如果未输入则有错误信息提示 pattern属性：用于在form表单提交数据前为input类型的输入框规定数据必须符合正则表达式，如果格式不正确则有错误信息提示 disabled属性：用于禁用input类型的输入框，被禁.
关于input的value用法介绍
小青头的博客
07-27 4458
不同type下input的含义和用途 使用jQuery选择器获取value值的注意事项 radio checkbox option text 不同type下input的含义和用途 type类型 input用途 value值的含义 text 单行文本框 文本框中默认初始内容 password 用来输入密码的单行文本框(文...
前端基础input输入框主要属性
m0_58849641的博客
09-17 1万+
　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。 　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。 　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。 　　4、复
input所有属性及作用
hanbic的博客
01-30 1万+
type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。 required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。 pattern：该属性包含了一个JavaScript风格的正则表达式，输入的内容必须完全匹配该正.
Input框内的提示文字变化效果
gooodi的博客
11-01 3277
大致效果如下: 点击前,灰色的placeholder的效果(其实不是写在placeholder里的) 点击后效果,变小 上移   代码如下: Html: (都是重复的这里就贴了其中一行的) &lt;div&gt; &lt;div class="floatText"&gt;手机号&lt;/div&gt; &lt;input id="mobileNum" cla...
input设置默认提示的属性
weixin_30814319的博客
10-09 836
placeholder="请输入截至日期" 转载于:https://www.cnblogs.com/ment/p/7642440.html
input标签 各属性解释
热门推荐
chao430的博客
03-22 4万+
input标签最全面的type属性   (2016-08-21 23:56:07) 转载▼ 标签：  type   属性   input   分类： HTML标签 由于时间关系，在上一节中只是简单的列举了input标签中的type属性，在本节中就详细地来运用input标签中的type属性。 因为以
【HTML】input标签中alt属性和title属性的比较
weixin_30508309的博客
11-18 466
经常用到这两个属性，但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结： 相同点：他们都会飘出一个小浮层，显示文本内容。 不同点： 1.alt只能是元素的属性，而title即可以是元素的属性也可以是标签，例如:<title>标题</title>。 2.alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网...
vue 下input标签的required属性提示文字修改 （国际化问题）
april_4的博客
05-09 2万+
我觉得input框require的时候，浏览器给的那种提示还挺好的～个人见解～但是国际化又是个问题，网上一般给出的是这样的&lt;input type="text" required oninvalid="setCustomValidity('不能为空aaa')" oninput="setCustomValidity('')"&gt;但是里面的文字要国际化啊，试着用vue里面带的 $t("plac...
HTML5 表单 input标签 required 属性 自动提示
FadingLight的博客
12-14 5651
如图，账户名为空时，点击提交，弹出默认提示框“请填写此字段”； 实现方法，<input>属性required 示例如下： <input type="text" id="username" name="username" required="required"> ...
uniapp 如何使用input做出输入提示效果
最新发布
05-27
要在uniapp中实现输入提示效果，可以使用`<input>`组件的`@input`事件和`<popup>`组件。 首先，在`<template>`中创建一个`<input>`和一个`<popup>`： ```html <template> <div> <input type="text" @input="handleInput" placeholder="请输入内容" /> <popup v-model="showPopup"> <view class="popup-content"> <view v-for="(item, index) in suggestions" :key="index" @click="handleSuggestionClick(item)"> {{ item }} </view> </view> </popup> </div> </template> ``` 然后，在`<script>`中定义`data`和几个方法： ```javascript <script> export default { data() { return { showPopup: false, suggestions: [], // 输入提示列表 inputValue: '' // 输入框的值 } }, methods: { handleInput(event) { const value = event.target.value this.inputValue = value // 更新输入框的值 // 发送请求获取输入提示列表 // 这里可以根据实际情况调用后端接口或者本地数据 this.getSuggestions(value) }, getSuggestions(value) { // 根据输入框的值获取输入提示列表 // 这里只是一个示例，实际情况可能需要进行debounce或throttle this.suggestions = ['提示1', '提示2', '提示3'].filter(item => item.includes(value)) // 根据输入提示列表的长度来控制popup的显示和隐藏 this.showPopup = this.suggestions.length > 0 }, handleSuggestionClick(value) { this.inputValue = value // 点击提示项后更新输入框的值 this.showPopup = false // 隐藏popup } } } </script> ``` 在`handleInput`方法中，通过发送请求获取输入提示列表，并根据列表的长度来控制`<popup>`的显示和隐藏。 在`handleSuggestionClick`方法中，点击提示项后更新输入框的值，并隐藏`<popup>`。 最后，在`<style>`中定义`<popup>`的样式： ```css <style> .popup-content { display: flex; flex-direction: column; background-color: #fff; border-radius: 5px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); padding: 10rpx; max-height: 300rpx; overflow-y: auto; } .popup-content > view { font-size: 28rpx; color: #333; line-height: 50rpx; text-align: center; border-bottom: 1px solid #eee; cursor: pointer; } .popup-content > view:last-child { border-bottom: none; } </style> ``` 以上就是在uniapp中实现输入提示效果的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值