jQuery 文本框得失焦点应用

一、文本框得失焦点一种是改变文本框的样式
    得到焦点:

         
    失去焦点


二、文本框得失焦点另一种是改变文本框的值
    得到焦点:


    失去焦点:

     

三、jQuery 得失焦点代码

1、改变文本框样式代码

1> CSS代码

     .focus {
         border: 1px solid #f00;
         background: #fcc;
      } 

     2>jQuery代码 (:input匹配 所有 input, textarea, select 和 button 元素)
    <script type="text/javascript">
    $(function(){
        $(":input").focus(function(){
              $(this).addClass("focus");
        }).blur(function(){
              $(this).removeClass("focus");
        });
    })
    </script>

2、改变文本框值的代码

1>jQuery代码

用:input匹配所有的input元素,当获取焦点时,就添加样式focus,通过$(this)自动识别当前的元素。

   focus()方法是获取焦点事件发生时执行的函数。

       blur()方法是失去焦点事件发生时执行的函数。

    <script type="text/javascript">
       $(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);
             }
        });
    })
    </script>
时间: 2024-10-08 18:48:37

jQuery 文本框得失焦点应用的相关文章

jquery 文本框失去焦点显示提示信息&amp;&amp;单击置空文本框

/** * @param {Object} id 'cname' * @param {Object} pointout '请输入收藏夹名称' */function pointoutListener(id, pointout) { //为cname添加单击时间和失去焦点的监听器 var myinput = document.getElementById(id); addListener(myinput, "click", function(){ var value1 = $('#'+id

JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, JavaScript Code复制内容到剪贴板 //这样执行,jquery只会当获取焦点后执行焦点函数的语句了. $(”#nameInput”).focus(); 可是当我们使用了jQuery 这样$(”#nameInput”) 返回的就不是DOM对象了而是jQuery对象,这样的话$(”#nameInp

jquery文本框的focus和blur事件

jquery文本框的focus和blur事件 focus事件在元素获取焦点时触发,如点击文本框时,触发该事件:而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件 代码如下 <body> <h3>表单中文本框的focus和blur事件</h3> <input id="txtest" type="text" value="" /> <div></div>

jQuery文本框中的事件应用

jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquer

javascript当文本框获得焦点设置边框

javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通过一个简单的实例介绍一下,以便需要的朋友进行扩展.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>文本框获得焦点边框变

当文本框失去焦点即进行表单验证简单实例

当文本框失去焦点即进行表单验证简单实例:不少的表单验证都有这样的功能,就是当鼠标焦点离开文本框的时候,即刻进行合法性验证,下面就通过一个实例简单介绍一下如何实现此功能,代码实例如下: <script type="text/javascript"> function onblurs(){ if(myform.name.value==""){ alert("姓名不得为空!"); } else if(myform.address.value

jQuery文本框(input textare)事件绑定方法教程

jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法

360浏览器文本框获得焦点后被软键盘遮罩的问题

场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了.截图如下                      (未获取软键盘焦点的情况)               (chrome浏览器调起软键盘的情况)            (360浏览器调起软键盘情况) 那么问题来了,浏览器的软键盘显示出来又哪几种情况呢?英文  中文(网上找的) 经过简单的了解,大

jquery 文本框聚焦文字删除

做作业需要,自己写了一个,写的很烂. $(function() { $("#search_input").addClass("before_focus");/*文档加载时添加搜索栏提示灰色字体样式*/ $("#search_input").focus(function(){/*文本框聚焦事件*/ $("#search_input").removeClass("before_focus");/*移除搜索栏灰色