文本输入占位符和跨浏览器支持

Question

所以我知道IE10之前IE不支持HTML5 placeholder属性，但我真的需要这个功能。

我想我能做到以下几点，但它似乎不工作（看起来像.focus和.blur方法不被解雇......

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script> 
    $(function() { 

     function isPlaceholderSupported() { 
      var input = document.createElement('input'); 
      return ('placeholder' in input); 
     } 

     var placeholderSupport = isPlaceholderSupported(); 

     if (placeholderSupport == false) { 
      $('#store_name').val('Store Name'); 
     } 

     $('#store_name').focus(function() { 
      if (placeholderSupport == false) { 
       if ($(this).val() == 'Store Name') { 
        $(this).val(''); 
       } 
      } 
     }); 

     $('#store_name').blur(function() { 
      if (placeholderSupport == false) { 
       if ($(this).val() == '') { 
        $(this).val('Store Name'); 
       } 
      } 
     }); 
    }); 
</script> 

<input type="text" name="store_name" id="store_name" placeholder="Store Name" /> 

我看不出任何破绽在这里的逻辑，但这恰恰是行不通的。有被报道在Chrome的开发工具没有错误，我还没有在IE9尝试过呢。

任何帮助将不胜感激！

Answer 1

检查的jQuery以下仅适用于IE

$(function() { 
     var textBox = $('input[type="text"]'); 
     textBox.each(function() { 
     var self = $(this); 
     self.val(self.attr('placeholder')); 
     }); 
    }); 
    $(document).on('focus', textBox, function() { 
     var self = $(this); 
     if(self.val() == self.attr('placeholder')) { 
      self.val(''); 
     } 
    }); 
    $(document).on('blur', textBox, function() { 
     var self = $(this); 
     if(self.val() == '') { 
      self.val(self.attr('placeholder')); 
     } 
    }); 

Answer 2

/*For placeholder*/ 
function ClearPlaceHolder(input) {  
    if (input.value == input.defaultValue){ 
     input.value = ""; 
     document.getElementById(input.id).style.color = '#444444'; 
    } 
} 

function SetPlaceHolder (input) { 
    if (input.value == "") { 
     input.value = input.defaultValue; 
     document.getElementById(input.id).style.color = '#c9c9c9';    
    } 
} 

Answer 3

为什么不使用现有的插件像http://archive.plugins.jquery.com/project/jq-watermark？

Answer 4

<input id="email" type="text"/> 

/*placeholder*/ 
function initPlaceHolder(input, defaultValue) { 
    input.onfocus = function() { 
        if (input.value == defaultValue){ 
         input.value = ""; 
         input.style.color = '#444444'; 
        } 
        }; 

    function remove() { 
     if (input.value == "") { 
      input.value = defaultValue; 
      input.style.color = '#c9c9c9';    
     } 
    } 
    input.onblur = remove; 
    remove(); 
} 
window.onload = function(){ 
    initPlaceHolder(document.getElementById("email"), "Enter your Email"); 
}; 

Answer 5

/* <![CDATA[ */ 
$(function() { 
var input = document.createElement("input"); 
if(('placeholder' in input)==false) { 
    $('[placeholder]').focus(function() { 
     var i = $(this); 
     if(i.val() == i.attr('placeholder')) { 
      i.val('').removeClass('placeholder'); 
      if(i.hasClass('password')) { 
       i.removeClass('password'); 
       this.type='password'; 
      }   
     } 
    }).blur(function() { 
     var i = $(this);  
     if(i.val() == '' || i.val() == i.attr('placeholder')) { 
      if(this.type=='password') { 
       i.addClass('password'); 
       this.type='text'; 
      } 
      i.addClass('placeholder').val(i.attr('placeholder')); 
     } 
    }).blur().parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { 
      var i = $(this); 
      if(i.val() == i.attr('placeholder')) 
       i.val(''); 
     }) 
    }); 
} 
}); 
/* ]]> */ 

试试这个..

Answer 6

您可以使用占位符支持IE9 +

$('[placeholder]').focus(function() { 
    var input = $(this); 
    if(input.attr('data-password') == 'password') { 
     input.attr('type','password'); 
     input.attr('data-password','text'); 
    } 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
     input.removeClass('placeholder'); 
     if(input.attr('type') == 'password') { 
      input.attr('type','text'); 
      input.attr('data-password','password'); 
     } 
    } 
}).blur(function() { 
    var input = $(this); 
    if(input.attr('data-password') == 'password') { 
     input.attr('type','password'); 
     input.attr('data-password','text'); 
    } 
    if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     input.val(input.attr('placeholder')); 
     if(input.attr('type') == 'password') { 
      input.attr('type','text'); 
      input.attr('data-password','password'); 
     } 
    } 
}).keyup(function() { 
    var input = $(this); 
    if(input.attr('data-password') == 'password') { 
     input.attr('type','password'); 
     input.attr('data-password','text'); 
    } 
    if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     if(input.attr('type') == 'password') { 
      input.attr('type','text'); 
      input.attr('data-password','password'); 
     } 
    } 
}).blur();