jquery/js实现验证聚焦，失焦

Posted 2021-04-08 若生如此

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,"click",function(){ 
        myinput.value = ""; 
    }) 
    addListener(myinput,"blur",function(){ 
        myinput.value = "聚焦吧"; 
    })

 

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