IE8兼容textarea的placeholder属性

╰+攻爆jí腚メ 2022-05-15 03:13 235阅读 0赞

placeholder属性树html5提出的新属性，作用是为input框或textarea框添加初始提示内容。当控件获取焦点输入时，清空提示内容。但IE8及其以下的版本并不支持该属性的显示。

下面做如下处理：

1.  `$(function(){`
2.  `if( !('placeholder' in document.createElement('input')) ){`
3.  `$('input[placeholder],textarea[placeholder]').each(function(){`
4.  `var that = $(this),`
5.  `text= that.attr('placeholder');`
6.  `if(that.val()===""){`
7.  `that.val(text).addClass('placeholder');`
8.  `}`
9.  `that.focus(function(){`
10. `if(that.val()===text){`
11. `that.val("").removeClass('placeholder');`
12. `}`
13. `})`
14. `.blur(function(){`
15. `if(that.val()===""){`
16. `that.val(text).addClass('placeholder');`
17. `}`
18. `})`
19. `.closest('form').submit(function(){`
20. `if(that.val() === text){`
21. `that.val('');`
22. `}`
23. `});`
24. `});`
25. `}`
26. `});`

第一个if条件是判断placeholder是否存在于解析的input框中。

closest方法的作用是:从当前元素开始向上查找，直到找到匹配的元素为止。

上诉closest方式计算查找form元素，然后在执行提交的form表单的时候执行sumit的方法。

上面添加了一个palceholder样式，其样式内容为：

1.  `.placeholder{`
2.  `opacity:0.5;`
3.  `filter:alpha(opacity=50);`
4.  `}`

opcaity属性是用来定义透明度的，其值在0-1.0之间。但IE8及其以下的版本并不支持。

在IE8上需用filter:alpha(opacity=?)来过滤，opacity的值在0-100间。

转载地址：[https://blog.csdn.net/mafan121/article/details/47779411][https_blog.csdn.net_mafan121_article_details_47779411]

[https_blog.csdn.net_mafan121_article_details_47779411]: https://blog.csdn.net/mafan121/article/details/47779411

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 textarea 输入框限制字数（兼容ie）

*问题**：在input标签中，只需要设置maxlength=”\*\*\*”即可，但是在textarea标签中，IE9及IE9以下浏览器是不支持的，IE10、IE11则...

r囧r小猫/ 2024年04月18日 07:10/ 0 赞/ 10 阅读

相关让IE支持placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息该提示会在输入字段为空时显示，并会在字段获得焦点时消失。但placeholder不支持IE10以下版本

Love The Way You Lie/ 2022年08月19日 02:15/ 0 赞/ 280 阅读

相关 jquery input placeholder支持兼容ie7，ie8

<input type="text" placeholder="搜索产品名称"/> <input type="password" placeholder="密码

谁践踏了优雅/ 2022年07月14日 14:55/ 0 赞/ 206 阅读

相关 jquery input placeholder支持兼容ie7，ie8

<input type="text" placeholder="搜索产品名称"/> <input type="password" placeholder="密码

ゞ浴缸里的玫瑰/ 2022年07月14日 14:55/ 0 赞/ 230 阅读

相关 IE8兼容IE7的方法

在Head中加入 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 还有一种方法是针对整个网

﹏ヽ暗。殇╰゛Y/ 2022年07月10日 04:06/ 0 赞/ 170 阅读

相关 IE8 兼容 border-radius 属性方案

1. IE利用VML矢量可标记语言作为画笔绘出圆角 IE8及一下不支持 border-radius属性，如果要想在IE浏览器中实现圆角的效果 1. IE利用VML矢

快来打我*/ 2022年05月23日 10:25/ 0 赞/ 129 阅读

相关圆角兼容ie8

ie8下不支持圆角属性，这里需要引入iecss3.htc文件演示地址：[http://www.bright2017.top/test1/test1-17/][ht

偏执的太偏执、/ 2022年05月22日 08:37/ 0 赞/ 166 阅读

相关 IE8兼容textarea的placeholder属性

placeholder属性树html5提出的新属性，作用是为input框或textarea框添加初始提示内容。当控件获取焦点输入时，清空提示内容。但IE8及其以下的版本并不支持

╰+攻爆jí腚メ/ 2022年05月15日 03:13/ 0 赞/ 236 阅读

相关 IE不兼容placeholder属性问题

placeholder属性不支持IE10以下的浏览器并且在IE浏览器下样式并没有谷歌等显示的一样正常显示 ![70][] IE10以上显示 ![70 1][] IE

￡神魔★判官ぃ/ 2022年05月09日 14:36/ 0 赞/ 293 阅读

相关 html5系列之placeholder兼容ie11

placeholder 属性是html5的属性，用于提供描述输入字段预期值的提示信息（hint）。简单例子： <!DOCTYPE HTML> <html>

红太狼/ 2021年10月01日 05:26/ 0 赞/ 298 阅读