我们来认识下input输入框的placeholder属性。

placeholder 属性提供可描述输入字段预期值的提示信息。(placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password)

该提示会在输入字段为空时显示,并会在字段获得焦点时消失(IE10+获取焦点消失,Chrome,FF等在输入有值时消失)。

IE10+,Chrome,Firefox,Safari支持placeholder属性(IE6/7/8/9不支持)。 

在页面显示类似:

html代码:

为了让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标签后面。

if(input.type == 'password'){
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.value = input.placeholder;
input.style.display = none;
input.parentNode.insertBefore(newInput,input.nextSibling);
}

  如果是一般文本框(type="text")或者其他类型 search, url, telephone, email,就设置input的值等于placeholder属性的值。

if(input.type == 'text'){
input.value = input.placeholder;
}

然后是获得焦点时:

  密码框类型是新建input标签获得焦点,隐藏新建input标签,显示原来的密码框。

newInput.onfocus = function(){
newInput.style.display = 'none';
input.style.display = '';
input.focus();
}

  其他类型获得焦点,清空设置的value值。

input.onfocus = function(){
if(input.value == input.placeholder) input.value = '';
}

最后是失去焦点时:

  密码框类型是判断原有的input失去焦点,如果有用户输入的值,不做任何改变,如果没有就隐藏,然后显示新建的input标签。

input.onblur = function(){
if(input.value == ''){
newInput.style.display = '';
input.style.display = 'none';
}
}

  其他类型失去焦点判断用户是否有输入的值,如果没有,就设置value值为placeholder的值,如果有就不做任何改变。

input.onblur = function(){
if(input.value == '') input.value = input.placeholder;
}

总的来说分两块处理,密码类型和非密码类型。

为了方便,兼容各大浏览器,一般要封装成一个插件,下面是我的一个封装,供参考。

/**
* LBS PlaceHolder
* ============================================
* 直接调用:
* PlaceHolder.init() //页面所有input
* PlaceHolder.create(input) //单个或多个input
* ============================================
* PlaceHolder.className
* 为显示占位文本input添加类名 默认placeholder
* ============================================
**/ ;(function(){
var PlaceHolder = {
_support: (function(){
return 'placeholder' in document.createElement('input');
})(),
className: 'placeholder',
init: function(){
if(!PlaceHolder._support){
var inputs = document.getElementsByTagName('input');
PlaceHolder.create(inputs);
}
},
create: function(inputs){
if(PlaceHolder._support) return;
var input = null, i = 0, n = inputs.length, holds = [];
if(!n) inputs = [inputs];
for(; i 有两种用法: 1. 页面所有input标签
PlaceHolder.init();

2.单个或者多个的input标签

var input = document.getElementById('username_input');
PlaceHolder.create(input);
var inputs = document.getElementsByTagName('input');
PlaceHolder.create(inputs);

其中有个 PlaceHolder.className , 这是个类名引用,默认类名称是 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+ */

到这里,差不多解决了各个浏览器placeholder问题,其实仔细点会发现一些差别。

支持placeholder的(IE10+获取焦点消失,Chrome,FF等在输入有值时消失)

插件是获取焦点消失,为了某些人要所有浏览器一致的要求,得做出一些改变,原理也差不多。

世界本来是丰富多彩的,不同的浏览器不同的体验有什么不好呢?

认识input输入框的placeholder属性的更多相关文章

  1. input输入框的readonly属性-----http://www.w3school.com.cn/tags/tag_input.asp

    http://www.w3school.com.cn/tags/tag_input.asp input输入框的readonly属性 查询方法: 1.先找官方的文档,api 2.官方的有看不懂的再百度相 ...

  2. HTML5 input控件 placeholder属性

    placeholder 属性提供可描述输入字段预期值的提示信息(hint),该提示会在输入字段为空时显示,并会在字段获得焦点时消失. <input placeholder="请输入姓名 ...

  3. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

  4. input输入框的border-radius属性在IE8下的完美兼容

    在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radi ...

  5. jquery 修改input输入框的 readOnly属性 && input输入框隐藏

    html的代码 <div class="control-group"> <label class="control-label required&quo ...

  6. angular4 form 表单中 input输入框的disabled属性

    直接加[disabled]="isDisabled"属性的话,出现报错 根据提示,做如下修改 private isEdit: boolean = true; private isD ...

  7. 用in判断input中的placeholder属性是否在这个对象里

    <input id="test"> var ele = document.getElementById("test"); if("plac ...

  8. 移动端input中的placeholder属性垂直

    今天做项目时发现,在手机端用placeholder时,Android手机可以垂直显示:ISO则不能使placeholder垂直;解决办法: .gcddfadf-con-pay-1 input::-we ...

  9. 让div支持placeholder属性/模拟输入框的placeholder属性

    实现方式:css div:empty:before{ content: attr(placeholder); color:#bbb;}div:focus:before{ content:none; }

随机推荐

  1. Servlet(二)GenericServlet

    以GenericServlet创建Servlet 1.在FirstServlet同文件夹下建立GServlet.java package com.hunhun; import javax.servle ...

  2. xcode中找不到XXX.dylib

    xcode中找不到 XXX.dylib 了,比如libz.tbd 如果要用到 libz.dylib,可以用下面的办法,来自 Stack Overflow. Go to Build Phases > ...

  3. Android FragmentStatePageAdapter的使用Demo

    上一篇写过FragmentPagerAdapter,这篇来介绍FragmentStatePagerAdapter,那么两者之间有何差别呢: FragmentPagerAdapter很多其它的用于少量界 ...

  4. 基于FFMPEG和SDL实现视频播放器

    这个是雷大牛实现的project. http://download.csdn.net/detail/leixiaohua1020/5122959 有兴趣的能够好好研究研究.

  5. 在Java中怎样逐行地写文件?

    下边是写东西到一个文件里的Java代码. 执行后每一次,一个新的文件被创建,而且之前一个也将会被新的文件替代.这和给文件追加内容是不同的. public static void writeFile1( ...

  6. atitit.java方法属性赋值and BeanUtils 1.6.1 .copyProperty的bug

    atitit.java分配给属性值方法and BeanUtils 1.6.1 .copyProperty的bug 1. core.setProperty(o, "materialId&quo ...

  7. Knockout应用开发指南 第八章:简单应用举例(2)

    原文:Knockout应用开发指南 第八章:简单应用举例(2) 5   Control types 这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select ...

  8. 主流芯片解决方案Ambarella的高清网络摄像机、德州仪器和控制海思

    (本文由四川艾普作为数码科技有限公司 苏斌.范清华 收集) 高清网络视频监控发展到今天.正的高清时代.诸多有实力的高清摄像机厂家的产品线也逐渐完好起来,高清网络视频监控的配套产品有更加丰富和成熟.与此 ...

  9. ngrok 本机代码部署外网访问神器(转)

    背景:听哥们说了个工具ngrok,可以让本机配置的web服务在外网访问,抱着将信将疑的态度试了试,发现还真的可以.下面记录下我自己的安装步骤,另外谈下自己还有些疑问的地方. 参考资料网站:http:/ ...

  10. 取证学习资料DVD

    http://www.infiniteskills.com/training/learning-computer-forensics.html https://www.youtube.com/watc ...