placeholder的兼容处理方法

placeholder是html5新增的一个属性，极大的减轻了表单提示功能的实现，但是对于IE6-IE9真的是只能靠自己写啦！

但是在自己写时会掉进了一个坑里，还好用了一会时间还是爬出来啦。

最终的解决方法方法如下：

 1 <form name="doluform" id="loginform">
 2     <div class="inputdivin">
 3         <input type="text" placeholder="用户名" name="usernamez" value=""/>
 4         <p class="tipsdiv"><span id="logintipsp"></span></p>
 5     </div>
 6     <div class="inputdivin">
 7         <input type="password" placeholder="密码" name="passwordz" value=""/>
 8         <span style="display:none" class="placespan"></span>
 9         <p class="tipsdiv"><span id="loginposswordtipsp"></span></p>
10     </div>
11     <div class="inputivin">
12         <p id="jhemail"></p>
13     </div>
14     <div class="inputdivin">
15         <button type="submit" title="点击登录" class="submitbtn">登&nbsp;录</button>
16     </div>
17     <div class="inputdivin">
18         <p class="passwordbc"><a href="javascript:void(0);" class="passwordaction" id="holdpassword"><b class="test"></b>&nbsp;&nbsp;记住密码<input type="hidden" name="remfor_input" value="1"/></a></p>
19         <p class="findpassword"><a href="${ctx}/home/index/findpassword_step1.jsp" class="passwordaction">忘记密码</a></p>
20     </div>
21 </form>

View Code

而对应的js组件写法如下：

 1 var Inputplace=function(){
 2     this.obj=null;
 3     this.type="";
 4     this.color="";
 5     this.tipspan=null;
 6 }
 7 Inputplace.prototype.init=function(obj,opt){
 8     var This=this;
 9     this.obj=obj;
10     this.setting={
11         "defaultz":obj.attr("placeholder"),
12         "tccolor":"#6d696a"
13     }
14     $.extend(this.setting,opt);
15     this.oldcolor=obj.css("color");
16     this.type=obj.attr("type");
17     if(this.type=="text"){//文本input设置
18         this.obj.val(this.setting.defaultz).css("color",this.setting.tccolor);
19         this.obj.unbind("focus");
20         this.obj.focus(function(){
21             if(This.obj.val()==This.setting.defaultz){
22                 This.obj.val("").css("color",This.oldcolor);
23             }
24         })
25         this.obj.unbind("blur");
26         this.obj.blur(function(){
27             if(This.obj.val()=="" || /^\s*$/.test(This.obj.val())){
28                 This.obj.val(This.setting.defaultz).css("color",This.setting.tccolor);
29             }
30         })
31     }
32     else if(this.type=="password"){//密码input实现
33         this.tipspan=this.obj.next("span.placespan");
34         this.tipspan.show().html(this.setting.defaultz).css({"color":this.setting.tccolor});
35         this.obj.unbind("focus");
36         this.obj.focus(function(){
37             This.tipspan.hide();
38         })
39         this.tipspan.unbind("click");
40         this.tipspan.click(function(){
41             $(this).hide();
42             This.obj.focus();
43         })
44         this.obj.unbind("blur");
45         this.obj.blur(function(){
46             if(This.obj.val()=="" || /^\s$/.test(This.obj.val())){
47                 This.tipspan.show();
48             }
49         })
50     }
51 }

View Code

而调用方法如下：

 1 <!--[if lte IE 9 ]>
 2 <script type="text/javascript" src="${ctx}/static/js/common/jsplaceholder.js"></script>
 3 <script type="text/javascript">
 4     $(function(){
 5         var inputtext=$("input:text");
 6         inputtext.each(function(){
 7             new Inputplace().init($(this))
 8         })
 9         var inputpass=$("input:password");
10         inputpass.each(function(){
11             new Inputplace().init($(this))
12         })
13     })
14 </script>
15 <![endif]-->

View Code

其中主要的坑就是在于input的类型上，当input为password的时候，如果你还只是直接设置val来做提示，那你就已经掉坑里啦，因为在password 会把输入的内容成..的形式，所以得绕一下，如果是password的话可以在password的那一组里新增一个元素去显示要提示的内容,像其中<span style="display:none" class="placespan"></span>就是专门用来做提示用的,在CSS里要先写好提示所用到的一干样式，样式为tipsdiv的P元素是用来放验证提示内容的，这里不用管，当表单获得焦点的时候或者span被点击的时候span都会消失，而input开始可以输入内容啦。

<div class="inputdivin"><input type="password" placeholder="密码" name="registerpassword" value=""/><span style="display:none" class="placespan"></span><p class="tipsdiv"><span id="registerpasswordtipsid"></span></p>
</div>

注:就在html5的placeholder能用的情况下，在各浏览器下也会有一些差异，在ff和chrome下，输入框获得焦点时，placeholder文字没有变化，只有当输入框中输入了内容时，placeholder文字才消失；而在safari和ie10-ie11下，当输入框获得焦点时，placeholder文字便立即消失。

默认情况下，placeholder的文字是灰色，输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么，如何修改placeholder的色值呢？

如果直接写input{color:red;}，可以看到，ie10和ff下，placeholder文字和输入文字都变成了红色.

而在chrome和safari下，placeholder文字颜色不变，只有输入的文字变成红色。

显然，这种做法是行不通的。因为我们只想改变placeholder文字的颜色，并不想改变输入文字的颜色。

正确的写法如下：

::-moz-placeholder{color:red;} //ff

::-webkit-input-placeholder{color:red;} //chrome,safari

:-ms-input-placeholder{color:red;} //ie10

转载于:https://www.cnblogs.com/xwwin/p/4233338.html

placeholder的兼容处理方法相关推荐

计算机更换硬盘键盘鼠标不好使,电脑键盘和主板不兼容解决方法
电脑键盘和主板不兼容解决方法键盘与主板不兼容的问题主要是键盘和鼠标的品质不好,其芯片的数据取样速度与主板的接收不一致,在使用过程中就会不定期的出现键盘错误. 主要故障表现: (1)不定期的检查不到键 ...
如何c51和mdk共存兼容_keil5 MDK软件中传统C51与STM32相互兼容的方法
之前单片机刚入门开始学89C51,开发环境为keil4,后来升级到keil5,现在准备学STM32,STM32开发环境为keilMDK,于是找到keilMDK安装包下载之后,才发现他和Atmel.ST ...
win7冒险岛java_冒险岛不兼容win7怎么办|解决win7冒险岛不兼容的方法
一些使用雨林木风win7系统的网友在电脑里下载并安装冒险岛这一款游戏之后,常常会遇到冒险岛打不开的情况,系统还会出现"此程序存在已知的兼容性问题"的提示,根据提示,我们可以了解到, ...
所有服务器显示不兼容,魔兽世界6.0服务器显示不兼容怎么办服务器显示不兼容解决方法介绍...
今天小编为大家带来了魔兽世界6.0服务器显示不兼容怎么办服务器显示不兼容解决方法介绍,感兴趣的朋友们可以跟着小编去下文了解一下哦! <魔兽世界>6.0版本游戏"德拉诺之王&qu ...
图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
在页面布局时经常会用到input输入框,有时为了提示用户输入正确的信息,需要用placeholder属性加以说明.这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder ...
IE6/7/8/CSS/BUG以及兼容问题解决方法
ie6,ie7,ie8 css bug汇总以及兼容解决方法1:li边距"无故"增加任何事情都是有原因的,li边距也不例外.先描述一下具体状况:有些时候li边距会突然增加很多,值也 ...
MathType与Office 2019的兼容问题解决方法
MathType与Office 2019的兼容问题解决方法解决方法如下: 1.从MathType安装路径中找到MathType\Office Support\64中的MathType Command ...
兼容ie浏览器的placeholder的几种方法
项目中遇到的问题,试了几种方法,今天整理出来,如果有不合适的地方,希望大家多多提意见. 第一种方法是:使用html新增的属性 "data-"来实现的,实现的时候,input框没有使 ...
placeholder的兼容处理(jQuery下)
这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个. 1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容 2.处理好输入框上焦点和是焦点 ...

placeholder的兼容处理方法

placeholder的兼容处理方法相关推荐

最新文章

热门文章