IE不兼容placeholder属性问题

￡神魔★判官ぃ 2022-05-09 14:36 380阅读 0赞

placeholder属性不支持IE10以下的浏览器并且在IE浏览器下样式并没有谷歌等显示的一样

正常显示

![70][]

IE10以上显示

![70 1][]

IE10以下显示

![70 2][]

### 解决方法   不用placeholder属性了   换一种实现方式   没想到吧  ###

新增一个style  样式为灰色

>     <style type="text/css" media="screen">
>         .inp {color:#B0B0B0;}
>     </style>

将input标签改为textarea  新增datavalue自定义默认值  后面也写上 （这里将input改为textarea是因为在测试时发现input使用这种方法时有问题）

![70 3][]

js中添加

>     $(function(){
>         function placeholder(target){
>             $(target).focus(function() {
>                 if($(this).val() == $(this).attr("datavalue")) {
>                     $(this).val("").removeClass("inp");
>                 }
>             })
>             $(target).blur(function(){
>                 if($(this).val() == "" || $(this).val() == $(this).attr("datavalue")) {
>                     var status = $(this).attr("status");
>                     if(status == 0){
>                         $(this).val("不能超过20个字符").addClass("inp");
>                     }else if(status == 1){
>                         $(this).val("不得超过1024字节").addClass("inp");
>                     }
>                 }
>             })
>         }
>         placeholder(".ipt1")
>     })

上面有一段status判断是因为  我的页面有两个地方显示不同的文字  所以这么写   然后这就搞定了

测试

谷歌

![70 4][]

IE10以及以下

![70 5][]

[70]: /images/20220506/c28dc7b427f044de84195b7baa62b9b1.png
[70 1]: /images/20220506/c7f49b7381a74c3aa968481d1618bf1c.png
[70 2]: /images/20220506/df7c8b0b365e48d99604a9a5fc4239f0.png
[70 3]: /images/20220506/020b140d4c4946919e9b7422a4d7abca.png
[70 4]: /images/20220506/66e1d72c7d06464a8849d6238714d08d.png
[70 5]: /images/20220506/af89d77ccf2a4d82a8b9a574bce39ab0.png