脚本宝典收集整理的这篇文章主要介绍了

jQ基础篇–jQuery,JS实现验证聚焦,失焦

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

jquery实现验证聚焦,失焦方法

我还是喜欢用jquery来实现,不管页面中多少个输入框需要实现聚焦,失焦,都公有,我常用的方法是:

遍历该页面中的input框,获取输入框中的val值,当该输入框聚焦的时候跟存放的oldValue值进行比较,如果值相同,就把该值变为空,失焦的时候,把原来存放的值再次赋值到val上,具体代码如下:

$(function(){

    $("input[class*=input]").each(function(){  
       var oldValue=$(this).val();  
       
       $(this).focus(function(){     
        if($(this).val()==oldValue){
            $(this).val('');
            }    
       })
       .blur(function(){
        if($(this).val()==""){
            $(this).val(oldValue)
            } 
       })      
    });

})

js实现方法一:直接在input中添加

<input type="text" onfocus="if(this.value=='聚焦吧') this.value='';" onblur="if(this.value=='') this.value='聚焦吧';" value="聚焦吧" name="name">

js实现方法二

html代码:

<input type="text" value="聚焦吧" id="myinput" /> 

js代码如下:

function addListener(element,e,fn){ 
    if(element.addEventListener){ 
         element.addEventListener(e,fn,false); 
    }else{ 
        element.attachEvent("on" + e,fn); 
    } 
} 
var myinput = document.getElementById("myinput"); 
addListener(myinput,"focus",function(){ 
    myinput.value = ""; 
}) 
addListener(myinput,"blur",function(){ 
    myinput.value = "聚焦吧"; 
})

当然当页面中有聚焦,失焦的时候,我还是推荐使用jquery的这种实现方式的。

总结

以上是脚本宝典为你收集整理的

jQ基础篇–jQuery,JS实现验证聚焦,失焦

全部内容,希望文章能够帮你解决

jQ基础篇–jQuery,JS实现验证聚焦,失焦

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过