IE8兼容textarea的placeholder属性

╰+攻爆jí腚メ 2022-05-15 03:13 316阅读 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