jQuery之文本框得失焦点
课题_jQuery之文本框得失焦点
jQuery之文本框得失焦点版本一css代码部分：.focus {border: 1px solid #f00;background: #fcc;}当焦点获得时，添加focus样式，添加边框，并改背景色为#fcchtml代码部分：<body><form action=""method="post"id="regForm"><fieldset><legend>个人基本信息</legend><div><label for="username">名称:</label><input id="username"type="text"/></div><div><label for="pass">密码:</label><input id="pass"type="password"/></div><div><label for="msg">详细信息:</label><textarea id="msg"rows="2"cols="20"></textarea></div></fieldset></form></body>这里有两个input，一个textare框。
:input匹配所有input, textarea, select 和button 元素。
jQuery代码部分：<script type="text/javascript">$(function(){$(":input").focus(function(){$(this).addClass("focus");}).blur(function(){$(this).removeClass("focus");});})</script>用:input匹配所有的input元素，当获取焦点时，就添加样式focus，通过$(this)自动识别当前的元素。
自定义jqGrid编辑功能,当行获取焦点时编辑,失去焦点时保存
自定义jqGrid编辑功能,当行获取焦点时编辑,失去焦点时保存自定义jqGrid编辑功能，当行获取焦点时编辑，失去焦点时保存/******************************************** Description:* 自定义jqGrid编辑功能，当行获取焦点时编辑，失去焦点时保存** 调用方法：* 在jGrid的(opts参数中)"editurl"属性的上面或下面添加属性customEdit: true** Author:*******************************************/var JqGridCustomEdit = {_cacheName: "editGrid_PrevRowKey",_saveBtnName: "editGrid_BtnSave",init: function (gridID) {//this.createSaveButton(gridID);this.createRowBlurEvent(gridID);},createSaveButton: function (gridID) {var self = this;var saveBtnID = gridID + "_" +self._saveBtnName;var htmlButton = '';$("body").append(htmlButton);},createRowBlurEvent: function (gridID) {var self = this;$("body").bind("click", function (event) { self.onRowBlur(gridID, event);});},onSave: function (gridID) {var saveBtnID = gridID + "_" +this._saveBtnName;$("#" + saveBtnID).click();},showEditCss: function (gridID, show) {if (show) {$("#" + gridID +"_ilsave").removeClass('ui-state-disabled'); $("#" + gridID +"_ilcancel").removeClass('ui-state-disabled'); $("#" + gridID +"_iladd").addClass('ui-state-disabled'); $("#" + gridID +"_iledit").addClass('ui-state-disabled');}else {$("#" + gridID +"_ilsave").addClass('ui-state-disabled'); $("#" + gridID +"_ilcancel").addClass('ui-state-disabled'); $("#" + gridID +"_iladd").removeClass('ui-state-disabled'); $("#" + gridID +"_iledit").removeClass('ui-state-disabled');}},onSelectRow: function (gridID, rowid) {var self = this;var rowKeyCacheID = gridID + "_" +self._cacheName;var prevRowKey =$("body").data(rowKeyCacheID);$("body").data(rowKeyCacheID, rowid);JqGridFormatCell.beforEditRow(gridID, rowid);$("#" + gridID).jqGrid("editRow", rowid, $("#" + gridID).get(0).p.editParams);self.showEditCss(gridID, true);},onRowBlur: function (gridID, event) {var haveEditRow = false;$("#" + gridID).find("tr").each(function () {if ($(this).attr("editable") == "1") {haveEditRow = true;return false;}});if (haveEditRow) {var self = this;var rowid = $("#" +gridID).jqGrid('getGridParam', 'selrow');if (rowid == null) { return; }var eventObj = ((event.srcElement) ? event.srcElement : event.target);var prev = false;var next = false;var pClass =$(eventObj).parent().attr("class");var nClass =$(eventObj).parent().attr("class");if (pClass) prev =pClass.indexOf("ui-datepicker-prev") != -1;if (nClass) next =nClass.indexOf("ui-datepicker-next") != -1;if($("#ui-datepicker-div").find(eventObj).length > 0 || prev || next) { return; }if (eventObj.tagName == "TD") {var currgriddom = $("#" +gridID).find(eventObj).length;if (currgriddom == 0) {self._saveData(gridID);}// var $eventTR = $(eventObj).parent();// if($eventTR.attr("id") != rowid) {//self._saveData(gridID);// }}else if (eventObj.tagName == "INPUT" || eventObj.tagName == "SELECT" || eventObj.tagName == "OPTION") {var rid = $(eventObj).attr("id");if (rid && rid.indexOf(rowid) == -1) {self._saveData(gridID);}}else {self._saveData(gridID);}}},_saveData: function (gridID) {var self = this;var rowKeyCacheID = gridID + "_" +self._cacheName;var rowid = $("body").data(rowKeyCacheID);if (rowid == null) {return false;}if (rowid == "new_row" && $("#" +rowid).attr("class").indexOf("jqgrid-new-row") != -1) {$("#" + gridID).jqGrid('saveRow', rowid, $("#" + gridID).get(0).p.addParams);} else {$("#" + gridID).jqGrid('saveRow', rowid, $("#"+ gridID).get(0).p.editParams);}self.showEditCss(gridID, false);// $("#" + gridID).jqGrid('saveRow', rowid, function (result) { // self.showEditCss(gridID, false);// if (result.responseText == "") {// //$.jAlert("Update ismissing!");// return false;// } else {//$("body").removeData(rowKeyCacheID); // //$.jAlert("Update is successful");// return true;// }// });}。
jQuery使得文本框获得焦点
jQuery使得⽂本框获得焦点
功能: ⽂本框中需要输⼊内容才可以提交，如果没有输⼊就提⽰并使该⽂本框获得焦点！
这么⼀个简单的事情如果没有使⽤jQuery的话是不是对象.focus()就可以了，
可是当我们使⽤了jQuery 这样$("#nameInput") 返回的就不是DOM对象了⽽是jQuery对象，
这样的话$("#nameInput").focus()这个⽅法的意义也就变了，
并不是使这个⽂本框获得焦点⽽是触发这个⽂本框所有绑定在onfocus的函数！
其实使⽤jQuery也⾮常简单将jQuery对象转化为⼀个DOM对象，这⼀点相信开发⼈员早就考虑到了，诶真是先天下之忧⽽忧啊$("#nameInput")[0].focus() 简单的加⼀个[0] 便是我们想要的了！！。
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
jQuery实现input输⼊框获取焦点与失去焦点时提⽰的消失与显⽰功能⽰例本⽂实例讲述了jQuery实现input输⼊框获取焦点与失去焦点时提⽰的消失与显⽰功能。
分享给⼤家供⼤家参考，具体如下：最近都成为页⾯仔了，主要⼯作都放在了前段，以前总是写后台程序，对前端的⼀些技术 html,css,javascript ,虽然都懂⼀些，但要做出⽐较好看页⾯，还是有很⼤的差距的。
最近就遇到了这样⼀个要求不是很⾼，但有点⼩清新风格的登录或注册页⾯，要求如下：1. 在输⼊框中如果没有内容，则显⽰提⽰：⽐如"请输⼊⽤户名"2. 如果输⼊框获得焦点，则隐藏提⽰3. 如果输⼊框失去焦点，并且输⼊框没有内容，则显⽰提⽰，如果有内容，则隐藏提⽰。
4. 采⽤ Jquery 1.7.2在搜索了资料之后，发现通过label, input 并结合javascript 结合来实现，因为 label 有⼀个 for 属性，并指向input 的id ,这样，只要点击 label ,input 输⼊框就能获取焦点.⼀旦获取焦点就响应Javascript事件。
隐藏label. 同样在失去焦点的时候，也触发事件，判断输⼊框是否有内容，来确定是否显⽰提⽰。
整个效果如下：获取焦点后代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> jQuery input焦点与提⽰⽂字</title><script src="/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#loginform .input_txt").each(function(){var thisVal=$(this).val();//判断⽂本框的值是否为空，有值的情况就隐藏提⽰语，没有值就显⽰if(thisVal!=""){$(this).siblings("label").hide();}else{$(this).siblings("label").show();}//聚焦型输⼊框验证$(this).focus(function(){$(this).siblings("label").hide();}).blur(function(){var val=$(this).val();if(val!=""){$(this).siblings("label").hide();}else{$(this).siblings("label").show();}});})})</script><style type="text/css">form{width:400px;margin:10px auto;border:solid 1px #E0fEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}span{display:block;height:40px;position:relative;margin:20px 0;}label{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}.border_radius{border-radius:5px;color:#B00000;}</style></head><body><form class="border_radius" id="loginform">得到焦点时提⽰语消失<span><label for="username">请输⼊账号</label><input type="text" class="input_txt border_radius" id="username" /></span><span><label for="password">密码</label><input type="text" class="input_txt border_radius" id="password" /></span></form></body></html>更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
jquery失去焦点的方法(一)
jquery失去焦点的方法(一)jQuery失去焦点介绍在网页开发中，经常需要处理用户与页面元素之间的交互。
用户输入完成后，经常需要对输入框进行验证或执行其他操作，这就需要用到”失去焦点”事件。
jQuery提供了多种方式来处理元素失去焦点的情况，下面列举了几种常用的方法。
方法一：blur()方法使用该方法可以直接将事件绑定到元素上，当元素失去焦点时则触发该事件。
$('input').blur(function(){// 在这里执行失去焦点后的操作});方法二：focusout()方法focusout()方法与blur()方法类似，不过它的主要区别是可以冒泡。
也就是说，当元素及其子元素都失去焦点时，都会触发该事件。
$('input').focusout(function(){// 在这里执行失去焦点后的操作});on()方法是jQuery的事件绑定函数，它可以绑定多个事件类型。
可以使用该方法来绑定blur和focusout事件。
$('input').on('blur focusout', function(){// 在这里执行失去焦点后的操作});方法四：delegate()方法delegate()方法可以用于向未来元素而未添加到文档中的元素添加事件处理程序。
它可以将blur和focusout事件绑定到元素上。
$(document).delegate('input', 'blur focusout', func tion(){// 在这里执行失去焦点后的操作});方法五：bind()方法bind()方法将一个事件处理程序附加到指定元素，并为指定的事件类型绑定函数。
$('input').bind('blur focusout', function(){// 在这里执行失去焦点后的操作});live()方法是一个历史遗留方法，它已在版本中被弃用。
输入框输入后失去焦点的原因
输入框输入后失去焦点的原因输入框输入后失去焦点的原因1. 引言输入框是日常生活和工作中经常使用的UI元素之一。
无论是在网页表单、移动应用程序还是电子邮件客户端中，我们都会遇到输入框。
然而，有时我们会发现在输入一段文字之后，输入框会自动失去焦点，导致我们需要再次点击输入框才能继续输入。
本文将探讨这种现象的原因，并从技术和用户体验的角度进行分析。
2. 技术原因（1）输入校验在许多应用程序中，我们会发现输入框具有一定的输入校验功能。
当我们输入不符合要求的内容（如通信方式号码、电子通信格式等）时，输入框会自动判断并给出相应的提示。
一旦输入框校验失败，系统可能会自动将焦点移动到其他元素上，以便用户及时发现并更正错误。
（2）自动保存为了保护用户输入内容的完整性，很多应用程序会在输入框失去焦点时自动保存用户的输入。
这样，即使发生意外关闭浏览器、网页崩溃等情况，用户的输入内容也不会丢失。
然而，为了实现自动保存功能，输入框将会在输入时定时自动失去焦点，以触发保存操作。
（3）页面跳转有些应用程序会在用户输入完一段文字后，自动将页面跳转到其他相关页面。
这样做可以提高用户的效率和用户体验。
在这种情况下，输入框会失去焦点并触发页面跳转。
3. 用户体验原因（1）减少键盘占用对于移动设备，屏幕空间有限，输入框会占据一部分宝贵的空间。
当我们输入一个较长的段落时，随着输入的增多，输入框会逐渐扩大，从而占用更多的屏幕空间，而且屏幕上可见的输入框会越来越少。
为了提高用户的可见区域，输入框在输入结束后失去焦点，让更多的内容在屏幕上可见。
（2）防止误操作在输入过程中，我们可能会不小心点击其他区域，导致输入焦点丢失。
为了减少这种误操作，输入框在输入结束后失去焦点，这样即使误点击其他区域，也不会影响正在输入的内容。
（3）提醒用户关注其他事情当我们输入一段文字时，输入框通常只是我们关注的一个小部分。
我们可能需要将输入文字与其他内容进行比较、编辑、复制等操作。
jq 聚焦和失焦
jq 聚焦和失焦摘要：1.什么是jq 聚焦和失焦2.jq 聚焦的原理3.jq 失焦的原理4.jq 聚焦和失焦的应用场景5.如何使用jq 实现聚焦和失焦正文：jq 是一个流行的JavaScript 库，它提供了一种简单的方式来操作DOM 元素。
在jq 中，有一个重要的概念就是聚焦和失焦。
本文将详细介绍jq 聚焦和失焦的概念、原理及应用场景。
1.什么是jq 聚焦和失焦在jq 中，聚焦是指选中一个或多个DOM 元素，而失焦则是指不再选中这些元素。
当使用jq 选择器选中一个元素时，该元素就被聚焦；当使用不选择器或者更改选择器时，被选中的元素就失去了焦点。
2.jq 聚焦的原理jq 聚焦的原理是通过使用jq 选择器来选中需要聚焦的元素。
例如，使用`$("div")`来选中页面上所有的div 元素。
选中后，你可以使用jq 提供的各种方法来操作这些元素。
3.jq 失焦的原理jq 失焦的原理是通过更改选择器或者使用不选择器来实现的。
例如，你可以使用`$(":not(div)")`来选中页面上除div 元素之外的所有元素，这样就实现了对div 元素的失焦。
4.jq 聚焦和失焦的应用场景（1）表单验证：在表单提交时，使用jq 聚焦和失焦可以实现对表单元素的有效性验证。
例如，当用户输入框内容发生变化时，可以通过聚焦和失焦来检查输入框内容是否为空。
（2）动态加载：在网页加载时，使用jq 聚焦和失焦可以实现对某些元素动态加载。
例如，当页面加载时，可以先隐藏某些元素，然后在用户操作时再通过聚焦和失焦来显示这些元素。
（3）交互设计：在用户与网页进行交互时，使用jq 聚焦和失焦可以实现一些有趣的交互效果。
例如，当用户鼠标悬停在某个元素上时，通过聚焦和失焦可以实现元素颜色的变化。
5.如何使用jq 实现聚焦和失焦要使用jq 实现聚焦和失焦，首先需要引入jq 库。
然后，你可以使用`$("selector")`来选中需要聚焦或失焦的元素，并使用jq 提供的各种方法来操作这些元素。
在js（jquery）中获得文本框焦点和失去焦点的方法
在js（jquery）中获得⽂本框焦点和失去焦点的⽅法先来看javascript的直接写在了input上复制代码代码如下:<input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" /><input name="pwpwd" type="password" class="input1" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">对于元素的焦点事件，我们可以使⽤jQuery的焦点函数focus(),blur()。
focus()：得到焦点时使⽤，和javascript中的onfocus使⽤⽅法相同。
如：复制代码代码如下:$("p").focus(); 或$("p").focus(fn)blur()：失去焦点时使⽤，和onblur⼀样。
如：复制代码代码如下:$("p").blur(); 或$("p").blur(fn)实例复制代码代码如下:<form><label for="searchKey" id="lbSearch">搜神马？</label> 这⾥label覆盖在⽂本框上，可以更好的控制样式<input id="searchKey" type="text" /><input type="submit" value="搜索" /></form>jquery代码复制代码代码如下:$(function() {$('#searchKey').focus(function() {$('#lbSearch').text('');});$('#searchKey').blur(function() {var str = $(this).val();str = $.trim(str);if(str == '')$('#lbSearch').text('搜神马？');});})好了相当的不错吧。
js实现input文本框点击时文字消失，失去焦点时文字出现
js实现input文本框点击时文字消失，失去焦点时文字出现一种<INPUT onblur="if (value ==''){value='输入文字'}" onclick="if(this.value=='输入文字')this.value=''" maxLength=40 size=16 value=输入文字 name=ss_name>另一种此功能主要是给用户在搜索输入关键字的时候，给用户一个友好的提示。
很实用的代码，主要是onclick(点击)和onblur(失去焦点)两个事件.具体代码如下：(注意：js代码要放到页面的最下面) <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body><form action="users.asp" method="post" name="so" id="so" style="margin:0 "><input name="values" type="text" id="values" size="15" maxlength="20" value="请输入用户名" style="color:#CCCCCC; "> <input type="submit" name="Submit2" value="提交"><input name="flag" type="hidden" id="flag" value="username"></form></body></html><script language="JavaScript" type="text/javascript">function addListener(element,e,fn){if(element.addEventListener){element.addEventListener(e,fn,false);} else {element.attachEvent("on" + e,fn);}}var values = document.getElementById("values");addListener(values,"click",function(){values.value = "";})addListener(values,"blur",function(){if (values.value ==''){values.value = "请输入用户名";} })</script>。
jquery获取焦点和失去焦点事件代码
jquery获取焦点和失去焦点事件代码⿏标在搜索框中点击的时候⾥⾯的⽂字就消失了。
我们在做⽹站的时候经常会⽤到搜索框的获得焦点和失去焦点的事件，因为懒，每次都去写⾮常的烦，于是就⼀劳永逸，遇到类似情况就来调⽤⼀下就OK 了相关js代码:复制代码代码如下:<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>input失去焦点和获得焦点jquery焦点事件插件 - 懒⼈建站</title><script src="/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){//focusblurjQuery.focusblur = function(focusid) {var focusblurid = $(focusid);var defval = focusblurid.val();focusblurid.focus(function(){var thisval = $(this).val();if(thisval==defval){$(this).val("");}});focusblurid.blur(function(){var thisval = $(this).val();if(thisval==""){$(this).val(defval);}});};/*下⾯是调⽤⽅法*/$.focusblur("#searchkey");});</script></head><body><form action="" method="post"><input name="" type="text" value="输⼊搜索关键词" id="searchkey"/><input name="" type="submit" id="searchbtn" value="搜索"/></form><p>input失去焦点和获得焦点jquery焦点事件插件，<br/><strong style="color:#F00">⿏标在搜索框中点击的时候⾥⾯的⽂字就消失了</strong>。
input文本框获取焦点和失去焦点判断
input⽂本框获取焦点和失去焦点判断onBlur:当输⼊框失去焦点后onFocus:当输⼊框获得焦点后这两个JavaScript事件是写在html标签中的例如：<input type="text" onBlur="" onFocus="" />使⽤jQuery的实现⽅法为： 对于元素的焦点事件，我们可以使⽤jQuery的焦点函数focus(),blur()。
focus()：得到焦点时使⽤，blur()：失去焦点时使⽤。
代码如下:$("input").focus(); 或$("input").focus(function(){这⾥是获取焦点时的事件})$("input").blur(); 或$("input").blur(function(){这⾥是失去焦点时的事件})同样可以使⽤jQuery中提供的:focus伪类来判定元素是否获取焦点；// Get the focused element:var $focused = $(':focus');// No jQuery:var focused = document.activeElement;// Does the element have focus:var hasFocus = $('input').is(':focus');// No jQuery:elem === elem.ownerDocument.activeElement;下⾯写⼀个实例：<!DOCTYPE HTML><HTML><HEAD><TITLE> New Document </TITLE></HEAD><style>.bor{border:3px solid red;}</style><BODY><input type="text"/><script type="text/javascript" src="jquery-1.11.3.js"></script><script type="text/javascript">$(document).ready(function(){$("input").focus(function(){$(this).addClass("bor");});$("input").blur(function(){$(this).removeClass("bor");});});</script></BODY></HTML>当然还可以根据获取元素的状态修改其他元素的各项属性，或者是需要发⽣的事件。
jquery聚焦文本框与扩展文本框聚焦方法
jquery聚焦⽂本框与扩展⽂本框聚焦⽅法复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jquery聚焦⽂本框 -</title><script src="/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></head><body><form action="" id="cse-search-box"><div><input type="hidden" name="cx" value="partner-pub-7740261255677392:7064996710" /><input type="hidden" name="ie" value="UTF-8" /><!--⽂本框--><input type="text" name="q" size="25" /><input type="submit" name="sa" value="搜索" /></div></form><script type="text/javascript">$(document).ready(function () {$("input[name='q']").focus();})</script></body></html>在不同的浏览器中，⼀个⽂本框，如果只是直接给⽂本框设置focus()，那么光标聚焦的位置可能是在最前⾯。
jquerydialog获取焦点的方法
jquerydialog获取焦点的⽅法本⽂实例讲述了jquery dialog获取焦点的⽅法。
分享给⼤家供⼤家参考，具体如下：$(document).ready(function () {//初始化新增申请对话框$("#addBusinessTrip").dialog({open: function (event, ui) {$(':input', '#addBusinessTripForm').not(':button, :submit, :reset, :hidden').val('');$("#addBusinessTripForm").validationEngine({inlineValidation: false,success: false,failure: function () {callFailFunction();}});},focus: function (event, ui) {comsole.log("dsfhsdj");$("#carOrNot").focus();//修改焦点},close: function (event, ui) {//清空提⽰信息$('#addBusinessTripForm').validationEngine('hideAll');},autoOpen: false,width: 480,modal: true,buttons: {"确定": function () {var valid = $('#addBusinessTripForm').validationEngine('validate');if (valid == true) {newOrEditAjax();} else {//alert("验证失败！！");}},"取消": function () {$(':input', '#addBusinessTripForm').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');$(this).dialog("close");}}});});更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
jquery失去焦点的方法
jQuery 失去焦点的方法在 Web 开发中，经常需要处理表单元素的焦点问题，比如当用户输入完毕后，需要失去焦点以触发某些事件或进行数据验证。
jQuery 提供了一系列方法来处理失去焦点的操作，让我们逐一介绍它们的用法和区别。
1. focus() 方法focus() 方法用于将焦点设置到匹配的元素上。
使用方法如下： $('input').focus();当我们调用该方法后，页面上第一个 input 元素会获得焦点。
这在处理表单自动聚焦、提示文本框、验证等场景下非常常见。
2. blur() 方法blur() 方法用于将焦点从匹配的元素上移除。
使用方法如下： $('input').blur();当我们调用该方法后，页面上第一个 input 元素将失去焦点。
这可以用于触发验证、格式化数据等操作。
3. on() 方法on() 方法可以绑定多个事件，并根据事件类型指定不同的处理函数。
我们可以使用 on() 方法来处理元素的焦点事件。
使用方法如下：$('input').on('focus blur', function() {// ...});在上述示例中，当 input 元素获得焦点或失去焦点时，都会触发绑定的函数。
这在需要根据焦点状态进行不同操作时非常实用。
需要注意的是，以上方法均适用于大多数表单元素，如 input、select、textarea 等。
而对于不支持焦点的元素，比如 div、span 等，调用 focus() 或 blur() 方法并不会产生任何效果。
综上所述，我们了解了 jQuery 中常用的失去焦点的方法，包括focus()、blur() 和 on()。
掌握这些方法将有助于我们处理表单元素的交互操作和数据验证，提升用户体验和网站的功能性。
以上就是本文对于 jQuery 失去焦点的方法的详细介绍，希望对您有所帮助。
谢谢阅读！。
jq 聚焦和失焦
jq 聚焦和失焦
在jq中，聚焦和失焦是两个与用户输入交互相关的事件。
聚焦
事件会在一个元素被选中或者获取焦点时触发，而失焦事件则会在元
素失去焦点时触发。
聚焦事件可以用于添加自定义行为，例如当用户点击或者使用
Tab键焦点移动到一个文本框时，我们可以通过聚焦事件来改变文本框的背景颜色或者显示一个提示信息，以提醒用户当前所处的输入区域。
失焦事件则可以用于验证用户输入或者保存用户的输入信息。
当
用户离开一个文本框时，我们可以通过失焦事件来检查用户输入的内
容是否符合要求，例如检查用户是否输入了有效的邮箱地址或者密码。
我们可以使用jq的focus()方法来绑定聚焦事件，syntax如下：```
$(selector).focus(function(){
// 执行聚焦时的操作
});
```
同样地，失焦事件可以使用blur()方法来绑定，syntax如下：
```
$(selector).blur(function(){
// 执行失焦时的操作
});
```
通过使用聚焦和失焦事件，我们可以为用户提供更好的交互体验，并确保他们能够正确输入所需的信息。
输入框获取焦点时value值隐藏与失去焦点时显示
输入框获取焦点时value值隐藏与失去焦点时显示
实现需求：
1）输入框获得焦点，提示内容消失，边框过渡动画变色
2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框过渡动画变色
<input type="text" value="邮箱/ID/手机号" style="font-family:-apple-system, sans-serif; color: #999; outline: none; border: 1px solid #eee; transition: .5s ease;" />
<script>
var loginName = document.querySelector('input'); // 获取元素loginName
loginName.onfocus = function() { // 获得焦点事件 onfocus if (this.value === "邮箱/ID/手机号") {
this.value = '';
}
this.style.border = '1px solid #ffd6db';
}
loginName.onblur = function() { // 失去焦点事件 onblur
if (this.value === '') {
this.value = '邮箱/ID/手机号';
}
this.style.border = '1px solid #eee';
}
</script>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
版本一
css代码部分：
.focus {
border: 1px solid #f00;
background: #fcc;
}
当焦点获得时，添加focus样式，添加边框，并改背景色为#fcc
html代码部分：
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" /> </div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password" /> </div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20 "></textarea>
</div>
</fieldset>
</form>
</body>
这里有两个input，一个textare框。
:input匹配所有input, textarea, select 和button 元素。
jQuery代码部分：
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
})
</script>
用: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>
做个逻辑判断，如果值为默认值，就将文本框中的内容清空。
失去焦点，如果文本框中为空，也就是没有输入内容，就将值还设为默认值。
这是一个简单的逻辑。