jquery文本框赋值与清空文本框内容的方法

发布时间:2020-12-18编辑:脚本学堂
本文介绍了jquery文本框赋值的方法,以及jquery如何清空文本框内容的方法,以及jquery文本框得到或失去焦点的实例教程,供大家学习参考。

例子,jquery文本框赋值与清空文本框内容
 

复制代码 代码示例:
$(document).ready(function(){    
    $("#resetbtn").click(function(){ 
        $("#user_id").val("");//清空 
        $("#realname").val("黑色头发");//赋值 
    }); 
}); 

jquery文本框得到或失去焦点

问题提出:
文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点!
如果没有使用jQuery的话直接用对象.focus()就可以了,可是当我们使用了jQuery 这样$(”#nameInput”) 返回的就不是DOM对象了而是jQuery对象,这样的话$(”#nameInput”).focus()这个方法的意义也就变了,并不是使这个文本框获得焦点而是触发这个文本框所有绑定在onfocus的函数!

其实使用jQuery也非常简单将jQuery对象转化为一个DOM对象$(”#nameInput”)[0].focus() 简单的加一个[0] 便是我们想要的了!!
 
例子:文本框得到/失去焦点
效果1:文本框得到焦点时,背景颜色发生变化,失去焦点时背景颜色恢复。
代码:
 

复制代码 代码示例:
$(document).ready(function()
{
$(":input").focus(function(){ 
$(this).addClass("focus");        
}).blur(function(){
$(this).removeClass("focus");
})
})

该例子中所用到的事件方法:
a.focus(fn):在每一个匹配的focus事件中绑定一个处理函数。
fn (Function) : 在每一个匹配元素的focus事件中绑定的处理函数。

focus事件可以通过鼠标点击或者键盘上的Tab导航触发
b.blur(fn):在每一个匹配元素的blur事件中绑定一个处理函数

fn (Function) : 在每一个匹配元素的blur事件中绑定的处理函数。

blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开时触发。

效果2:文本框含有默认值,当文本框得到焦点时,文本框的默认值消失

代码:
 

复制代码 代码示例:

$(document).ready(function(){
$(":input").focus(function(){
    $(this).addClass("focus");
      if($(this).val() ==this.defaultValue){   //判断文本框的值是否是默认值
       $(this).val(""); }

  }).blur(function(){
     $(this).removeClass("focus");
       if ($(this).val() == '') {
       $(this).val(this.defaultValue);
  }
  });
})