html部分:
1 <form action=""> 2 <input class="username inp" type="text" placeholder= "姓名" pattern="/([u4e00-u9fa5]+|([a-zA-Z]+s?)+)/ " required /> 3 <input class="tel inp" type="tel" maxlength="2" placeholder = "电话" pattern="/^0?(13|14|15|17|18)[0-9]{9}$/" required /> 4 <input class="QQ inp" type="text" placeholder = "QQ" pattern="/^[1-9]{1}d{4,10}$/" required /> 5 <input class="email inp" type="email" placeholder = "邮箱" pattern="/w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+/" required /> 6 7 <textarea class="inp input_obj" placeholder = "留言" ></textarea> 8 9 <input class="submit" type="submit" value="申请加盟" /> 10 <input class="reset" type="reset" value="重新填写" /> 11 </form>
JS部分:
1 <script> 2 var form={}; 3 form.placehold=function(){ 4 var arr=[]; 5 //is arguments(判断传入的参数是否是一个对象) 6 var obj=typeof arguments[0]=="object"?arguments[0]:null; 7 8 //set value(设置初始值) 9 for(var i=0;i<obj.length;i++){ 10 //is placeholder(判断是否存在placeholder这个属性值) 11 arr[i]=obj.eq(i).attr("placeholder")?obj.eq(i).attr("placeholder"):''; 12 //set val(IE低版本不支持placeholder,所以把placeholder设置为value值,并设置样式) 13 obj.eq(i).val(arr[i]).css({"color":"#999"}); 14 } 15 16 //得到焦点时,设置value=null;失去焦点时,设置value是placeholder属性的值 17 obj.focus(function(){ 18 $(this).val(""); 19 }).blur(function(){ 20 var i=$(this).index(); 21 if($(this).val().length<1){ 22 $(this).val(arr[i]); 23 } 24 }); 25 }; 26 27 //得到IE浏览器的版本号 28 var s=navigator.appVersion.indexOf("MSIE"); 29 //如果是IE9以下,则调用这个方法,并传入参数 30 if(parseInt(navigator.appVersion.substr(s+4,3))<9){ 31 form.placehold($(".inp")); 32 }; 33 </script>
若有其他更好的方法请留言或评论