jQuery focus和blur事件

野性酷女 2024-02-17 18:14 19阅读 0赞

Html页面结构:

<fieldset>
      <legend align="center">会员登录</legend>
      <dl>
        <dt>用户名</dt>
        <dd>
          <input type="text" name="textfield" id="uname" value="合理"/>
        </dd>
      </dl>
      <dl>
        <dt>密   码</dt>
        <dd>
          <input type="text" name="textfield" id="upass" />
        </dd>
      </dl>
       <dl>
        <dt> </dt>
        <dd>
          <input type="submit" name="button" id="button" value="登录" />
        </dd>
      </dl>
      <div id="events"></div>
    </fieldset>

JS

<script type="text/javascript">
         $(function(){
    		 //
    		$("#uname").focus(function(){
    			$(this).addClass("my");
    			
    			var txt=$(this).val();
    			//与默认值比较
    			if(txt==this.defaultValue){
    			    $(this).val("");	
    			}
    			
    		}); 
    		
    		
    		$("#uname").blur(function(){
    			$(this).removeClass("my");
    			
    			var txt=$(this).val();
    			//与默认值比较
    			if(txt==""){
    			    $(this).val(this.defaultValue);	
    			}
    			
    		}); 
    		
    	});
    </script>

效果

1)运行页面

![Center][]

2)获得焦点事件,清空文本值,并加载边框

![Center 1][]

3)失去得焦点事件,恢复文本值,并清除边框

![Center 2][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c06094ef316a44b19596fcb579385911.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/29e68ddad2d74ad9b4c820f9c618abe3.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6bfe31081b0a44e48c2b7bf17fcc3968.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery focus和blur事件

Html页面结构: <fieldset> <legend align="center">会员登录</legend> <dl>

野性酷女/ 2024年02月17日 18:14/ 0 赞/ 20 阅读

相关 jQuery 绑定3种表单事件 change(value值改变)，focus(获到焦点)，blur(失去焦点)

1 change() 说明：元素的value值改变时，触发change事件。change事件只适用于文本框（text）、文本域（textarea）、下拉框（select）

痛定思痛。/ 2023年10月05日 09:27/ 0 赞/ 35 阅读

相关 Vue中mintui的field实现blur和focus事件

[https://blog.csdn.net/ywl570717586/article/details/80535236][https_blog.csdn.net_ywl570

比眉伴天荒/ 2023年02月22日 08:27/ 0 赞/ 16 阅读

相关【jquery】input 和 blur 事件

实现功能为：Dom 加载完之后，给input输入框绑定 input(输入变化) 和 blur(失去焦点) 事件，代码如下（错误）： $("newname").on("

迷南。/ 2022年08月09日 14:58/ 0 赞/ 329 阅读

相关 Qt获得和失去焦点事件(Focus事件)

1.重写控件的focusInEvent()和focusOutEvent()函数针对一个窗口上的多个可编辑控件(比如QLineEdit、QTextEdit等)，我们希望控

痛定思痛。/ 2022年04月15日 05:20/ 0 赞/ 2005 阅读

相关 DOM的 focus() 方法和blur() 方法

DOM的focus()方法和blur()方法的含义： focus()：表示为元素赋予焦点 blur()：表示使元素失去焦点

亦凉/ 2021年12月18日 23:03/ 0 赞/ 347 阅读

相关 Vue中的@blur事件

@blur 是什么？ @blur 是当元素失去焦点时所触发的事件 @blur 怎么使用？ <template>

浅浅的花香味﹌/ 2021年12月18日 20:51/ 0 赞/ 2861 阅读

相关 jquery easyui textbox onblur事件，textbox blur事件无效解决方案

jquery easyui textbox onblur事件，textbox blur事件无效解决方案 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.

╰半橙微兮°/ 2021年12月17日 08:51/ 0 赞/ 859 阅读

相关 JS--JavaScript焦点处理（获取焦点focus、失去焦点blur）

焦点处理焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。获取焦点：focus 当单击或

客官°小女子只卖身不卖艺/ 2021年08月13日 14:16/ 0 赞/ 775 阅读

相关 div,span等标签支持focus/blur事件

<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");'

男娘i/ 2021年07月04日 22:12/ 0 赞/ 715 阅读