认识input输入框的placeholder属性
2015-06-18 16:41
555 查看
我们来认识下input输入框的placeholder属性。
placeholder 属性提供可描述输入字段预期值的提示信息。(placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password)
该提示会在输入字段为空时显示,并会在字段获得焦点时消失(IE10+获取焦点消失,Chrome,FF等在输入有值时消失)。
IE10+,Chrome,Firefox,Safari支持placeholder属性(IE6/7/8/9不支持)。
在页面显示类似:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/26/f2dac8d48533034d75f7330f9b23d553.png)
html代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/26/d4d54261734285226318ee5aa34f27c4.png)
为了让IE6/7/8/9支持placeholder属性,我说说自己解决方法。
首先判断浏览器是否支持placeholder属性。
如果不支持,其中分两种情况:
如果是密码框(type="password"),就创建一个类似的input标签并且设置(type="text"),把原来有placeholder属性的input标签隐藏,并且把placeholder的值赋给新建的input标签,最后把新建的input标签插入到原来的input标签后面。
然后是获得焦点时:
密码框类型是新建input标签获得焦点,隐藏新建input标签,显示原来的密码框。
最后是失去焦点时:
密码框类型是判断原有的input失去焦点,如果有用户输入的值,不做任何改变,如果没有就隐藏,然后显示新建的input标签。
总的来说分两块处理,密码类型和非密码类型。
为了方便,兼容各大浏览器,一般要封装成一个插件,下面是我的一个封装,供参考。
2.单个或者多个的input标签
有时候会发现设置的颜色没有起作用,注意下CSS样式的优先级。
可以在各个浏览器看看效果:
/*输入时的颜色*/
#testPlaceHolder input{padding: 5px;margin: 5px;color: #000;}
/*占位时的颜色*/
#testPlaceHolder input.placeholder{color: #f00;}/* IE6/7/8/9 */
#testPlaceHolder input::-webkit-input-placeholder{ color:#f00;}/* WebKit */
#testPlaceHolder input:-moz-placeholder{color:#f00;}/* Firefox 4 - 18 */
#testPlaceHolder input::-moz-placeholder{color:#f00;}/* Firefox 19+ */
#testPlaceHolder input:-ms-input-placeholder{color:#f00;}/* IE10+ */
var testPlaceHolder = document.getElementById('testPlaceHolder'),
inputs = testPlaceHolder.getElementsByTagName('input');
PlaceHolder.create(inputs);
到这里,差不多解决了各个浏览器placeholder问题,其实仔细点会发现一些差别。
支持placeholder的(IE10+获取焦点消失,Chrome,FF等在输入有值时消失)
插件是获取焦点消失,为了某些人要所有浏览器一致的要求,得做出一些改变,原理也差不多。
世界本来是丰富多彩的,不同的浏览器不同的体验有什么不好呢?
placeholder 属性提供可描述输入字段预期值的提示信息。(placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password)
该提示会在输入字段为空时显示,并会在字段获得焦点时消失(IE10+获取焦点消失,Chrome,FF等在输入有值时消失)。
IE10+,Chrome,Firefox,Safari支持placeholder属性(IE6/7/8/9不支持)。
在页面显示类似:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/26/f2dac8d48533034d75f7330f9b23d553.png)
html代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/26/d4d54261734285226318ee5aa34f27c4.png)
为了让IE6/7/8/9支持placeholder属性,我说说自己解决方法。
首先判断浏览器是否支持placeholder属性。
var isSupport = function(){ return 'placeholder' in document.createElement('input'); }
如果不支持,其中分两种情况:
如果是密码框(type="password"),就创建一个类似的input标签并且设置(type="text"),把原来有placeholder属性的input标签隐藏,并且把placeholder的值赋给新建的input标签,最后把新建的input标签插入到原来的input标签后面。
如果是一般文本框(type="text")或者其他类型 search, url, telephone, email,就设置input的值等于placeholder属性的值。 if(input.type == 'text'){ input.value = input.placeholder; }
然后是获得焦点时:
密码框类型是新建input标签获得焦点,隐藏新建input标签,显示原来的密码框。
其他类型获得焦点,清空设置的value值。 input.onfocus = function(){ if(input.value == input.placeholder) input.value = ''; }
最后是失去焦点时:
密码框类型是判断原有的input失去焦点,如果有用户输入的值,不做任何改变,如果没有就隐藏,然后显示新建的input标签。
其他类型失去焦点判断用户是否有输入的值,如果没有,就设置value值为placeholder的值,如果有就不做任何改变。 input.onblur = function(){ if(input.value == '') input.value = input.placeholder; }
总的来说分两块处理,密码类型和非密码类型。
为了方便,兼容各大浏览器,一般要封装成一个插件,下面是我的一个封装,供参考。
PlaceHolder.init();
2.单个或者多个的input标签
placeholder。 为什么要加这个类名呢?主要是为了设置placeholder占位文本在input标签中的颜色。 为了得到一致的占位文本颜色,需要设置样式(假设为红色) /*输入时的颜色*/ input{color: #000;} /*占位时的颜色*/ input.placeholder{color: #f00;}/* IE6/7/8/9 */ input::-webkit-input-placeholder{ color:#f00;}/* WebKit */ input:-moz-placeholder{color:#f00;}/* Firefox 4 - 18 */ input::-moz-placeholder{color:#f00;}/* Firefox 19+ */ input:-ms-input-placeholder{color:#f00;}/* IE10+ */
有时候会发现设置的颜色没有起作用,注意下CSS样式的优先级。
可以在各个浏览器看看效果:
/*输入时的颜色*/
#testPlaceHolder input{padding: 5px;margin: 5px;color: #000;}
/*占位时的颜色*/
#testPlaceHolder input.placeholder{color: #f00;}/* IE6/7/8/9 */
#testPlaceHolder input::-webkit-input-placeholder{ color:#f00;}/* WebKit */
#testPlaceHolder input:-moz-placeholder{color:#f00;}/* Firefox 4 - 18 */
#testPlaceHolder input::-moz-placeholder{color:#f00;}/* Firefox 19+ */
#testPlaceHolder input:-ms-input-placeholder{color:#f00;}/* IE10+ */
var testPlaceHolder = document.getElementById('testPlaceHolder'),
inputs = testPlaceHolder.getElementsByTagName('input');
PlaceHolder.create(inputs);
到这里,差不多解决了各个浏览器placeholder问题,其实仔细点会发现一些差别。
支持placeholder的(IE10+获取焦点消失,Chrome,FF等在输入有值时消失)
插件是获取焦点消失,为了某些人要所有浏览器一致的要求,得做出一些改变,原理也差不多。
世界本来是丰富多彩的,不同的浏览器不同的体验有什么不好呢?
相关文章推荐
- Spring3.2.11与Quartz2.2.1整合时内存泄漏的问题的解决
- 常用第三方类库
- 丢失的第一个正整数 查看运行结果
- 余弦相似度
- Strategy Pattern 策略模式(一)
- PB中的DataStore是个好东西
- iframe自适应高度
- 【抓包工具】wireshark
- 搭建nexus服务器后,执行mvn出错解决办法
- jQuery 开发之jQuery事件一
- Win10不激活出现卡顿怎么办?
- Reservoir Sampling - 蓄水池抽样
- SpringAOP拦截Controller,Service实现日志管理(自定义注解的方式)
- ls -l文件类型
- java中Math.round(),Math.ceil(),Math.floor()运算
- java ThreadLocal 用法
- 找女神要QQ号码
- 我们一起学习WCF 第二篇WCF承载多个接口
- 阅读《一个程序猿的生命周期》有感
- SeGue 多控制器跨界面传递数据原理