html5的placeholder可以在input框中给予填写提示。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。但是在ie的低版本中，他是无效的。
如何快速的解决这些问题，就需要用到jquery再写上一些js就解决了。虽然说是写js，其实你只要认真读明白里面道理，以后就是把这段js引入即可。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>placeholder</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> //第一种方法 $(document).ready(function(){ var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue; if(defaultValue==''){ input.value=text} input.onfocus=function(){ if(input.value===text){this.value=''}}; input.onblur=function(){if(input.value===''){this.value=text}}}; if(!supportPlaceholder){ for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder'); if(input.type==='text'&&text){placeholder(input)}}}}); //第二种方法 $(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); }; }) function placeholderSupport() { return 'placeholder' in document.createElement('input'); } </script> </head> <body> <form> <label for="name">用户名：</label> <input type="text" placeholder="请输入用户名"/> </form> </body> </html> |