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的这种实现方式的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值