首页 > WEB前端 > jQuery > 正文


使用jQuery快速解决input中placeholder值在ie中无法支持的问题

03-08 23:40:36   来源:互联网   评论: 点击:

如何使用jQuery快速解决input中placeholder值在ie中无法支持的问题


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript">
  8. //第一种方法
  9. $(document).ready(function(){
  10.     var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
  11.     if(defaultValue==''){
  12.         input.value=text}
  13.         input.onfocus=function(){
  14.             if(input.value===text){this.value=''}};
  15.             input.onblur=function(){if(input.value===''){this.value=text}}};
  16.             if(!supportPlaceholder){
  17.                 for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
  18.                 if(input.type==='text'&&text){placeholder(input)}}}});
  19. //第二种方法
  20. $(function(){
  21. if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
  22.     $('[placeholder]').focus(function() {
  23.         var input = $(this);
  24.         if (input.val() == input.attr('placeholder')) {
  25.             input.val('');
  26.             input.removeClass('placeholder');
  27.         }
  28.     }).blur(function() {
  29.         var input = $(this);
  30.         if (input.val() == '' || input.val() == input.attr('placeholder')) {
  31.             input.addClass('placeholder');
  32.             input.val(input.attr('placeholder'));
  33.         }
  34.     }).blur();
  35. };
  36. })
  37. function placeholderSupport() {
  38.     return 'placeholder' in document.createElement('input');
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <form>
  44.   <label for="name">用户名:</label>
  45.   <input type="text" placeholder="请输入用户名"/>
  46. </form>
  47. </body>
  48. </html>


相关热词搜索:jquery placeholder

上一篇:jQuery控制图片水平垂直居中方法 下一篇:使用jQuery map方法将选中复选框值转换成用逗号分隔的字符串
分享到: 收藏