当前位置：文档之家 › js给文本框动态绑定onblur方法,失焦的时候触发

js给文本框动态绑定onblur方法,失焦的时候触发

  • 格式：docx
  • 大小：14.99 KB
  • 文档页数：2

下载文档原格式

  / 2

合集下载

js实现input文本框点击时文字消失，失去焦点时文字出现

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>。

onblur事件用法

onblur事件用法

onblur事件用法
onblur事件是JavaScript中的一种事件类型，用于在元素失去焦点时触发。

在HTML中，可以使用onblur属性将JavaScript代码与元素的blur事件绑定在一起。

onblur事件的用途包括：
1. 验证输入：可以通过onblur事件来检查用户输入的内容是否符合要求，比如检查输入的日期格式是否正确、是否输入了必填字段等。

2. 触发动作：可以通过onblur事件来触发一些动作，比如在用户离开输入框后，自动计算输入框中的数值或者跳转到下一个输入框等。

3. 改变样式：可以通过onblur事件来改变元素的样式，比如当用户离开输入框时，将输入框的背景色改变为某种颜色。

示例代码如下：
<input type="text" onblur="checkInput(this)">
<script>
function checkInput(elem) {
验证输入
触发动作
改变样式
}
</script>
在这个示例中，当用户离开输入框时，将调用checkInput函数，并将当前输入框的引用传递给它。

这个函数可以在其中进行验证、触发动作或改变样式的操作。

js各种事件如：点击事件、失去焦点、键盘事件等

js各种事件如：点击事件、失去焦点、键盘事件等

js各种事件如：点击事件、失去焦点、键盘事件等事件驱动：我们点击按钮按钮去掉⽤相应的⽅法。

demo：<input type="button" value="点击" onclick="func()">function func(){alert(1);}事件：onclick 点击onblur：失去焦点onfocus 得到焦点onkeydown 按下键盘onkeyup 松开键盘onkepress 按住键盘onmousedown 按下⿏标onmouseup 松开⿏标onmouseover 把⿏标放到上⾯ommousemove 移动⿏标onmouseout 移开⿏标onload ：页⾯加载onchange：改变onsubmit ：表单提交。

如何绑定事件：（1）<input type="button" value="点击" onclick="fun()">function fun(){alert(1);}（2） document.getElementById("bt").onclick=function(){alert(2);}（3） onload页⾯加载window.onload=function(){/* 页⾯加载完了以后在执⾏onload⾥⾯的⽅法 */}失去焦点得到焦点⼩案例<input type="text" id="te" onblur="fun();"/><br/><input type="text" id="xt" onfocus="func()" size="50"/>function fun(){/* 失去焦点 */var vas = document.getElementById("te").value;alert(vas);}function func(){/* 得到焦点 */var da = new Date();document.getElementById("xt").value=da.toLocaleString(); }。

js中的onchange、onselect 使用的例子

js中的onchange、onselect 使用的例子

在JavaScript中，`onchange`和`onselect`是两种常用的事件处理程序，它们分别用于处理输入元素（如文本框、下拉框等）内容改变和选择事件。

下面是一些使用`onchange`和`onselect`的例子：
**1. onchange 事件**
`onchange`事件在元素内容被改变后触发。

以下是一个简单的例子，当文本框内容改变时，会显示一个警告：
```html
<input type="text" id="myInput" onchange="alert('文本内容已
被更改！')">
```
在这个例子中，每当用户更改文本框的内容时，就会触发
`onchange`事件，并执行定义的函数（在这个例子中是显示一个警告）。

**2. onselect 事件**
`onselect`事件在文本框或输入框的内容被选中时触发。

以下是一
个简单的例子，当用户选中某段文本时，会显示选中的文本：
```html
<textarea id="myTextarea"
onselect="alert(this.value)"></textarea>
```
在这个例子中，每当用户选中文本框中的文本时，就会触发
`onselect`事件，并执行定义的函数（在这个例子中是显示选中的文本）。

请注意，这些只是基本的使用示例。

在实际开发中，您可能需要根据具体需求来编写更复杂的函数和逻辑。

js的onchange()方法

js的onchange()方法

js的onchange()方法JavaScript是一种脚本语言，它在网页中起到了非常重要的作用。

它可以让我们对网页进行交互和动态操作。

而其中最常见和常用的一个方法就是onchange()方法。

onchange()方法是一个事件处理器。

它用于捕获用户的输入变化，并在相应的事件发生时调用指定的函数。

onchange()方法通常用于HTML表单控件中，比如下拉选项，文本框，复选框等。

当用户更改表单中的内容时，onchange()方法便会被触发。

这时，我们就可以通过这个方法来响应这些更改。

下面我们来详细介绍一下onchange()方法的用法和一些注意事项。

1. 语法onchange()方法的语法很简单，它只需要一个函数作为参数即可。

下面是其基本语法：``` element.onchange = function(){...}; ```其中，element可以是任何html元素，比如input、select等。

2. 用法onchange()方法的用法比较灵活，它可以对多种表单控件进行响应。

以下是onchange()方法常见的用法:2.1 下拉框onchange()方法最常见的用法就是对下拉框进行响应。

当用户选择不同的选项时，就会触发相应的事件。

下面是一个简单的例子：```html <select onchange="changeColor(this)"> <option value="red">Red</option> <optionvalue="green">Green</option> <optionvalue="blue">Blue</option> </select> ```在这个例子中，当用户选择不同的选项时，就会触发changeColor()函数。

js控制输入框获得和失去焦点时状态显示的方法

js控制输入框获得和失去焦点时状态显示的方法

js控制输⼊框获得和失去焦点时状态显⽰的⽅法本⽂实例讲述了js控制输⼊框获得和失去焦点时状态显⽰的⽅法。

分享给⼤家供⼤家参考。

具体实现⽅法如下：<!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=gb2312" /><title>边框变⾊</title><style type="text/css"><!--.SearchKeyword {border:1px solid #797A75;width: 202px;color: #CDCDCD;font-size:12px;}.SearchKeywordonFocus {border:1px solid #ABCD3A;width: 202px;color: #000000;font-size:12px;}--></style><script language="javascript">function keywordfocus(){if (document.formSearch.keyword.value == '请输⼊关键字'){document.formSearch.keyword.value = '';document.formSearch.keyword.className = 'SearchKeywordonFocus';}}function keywordblur(){if (document.formSearch.keyword.value == ''){document.formSearch.keyword.value = '请输⼊关键字';document.formSearch.keyword.className = 'SearchKeyword';}}</SCRIPT></head><body><form id="formSearch" name="formSearch" method="post" action=""><input type="text" name="keyword" class="SearchKeyword" value="请输⼊关键字" onFocus="keywordfocus();" onBlur="keywordblur();" /> </form></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

在js（jquery）中获得文本框焦点和失去焦点的方法

在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的value值不触发onchange事件解决方案（转）

JS改变input的value值不触发onchange事件解决方案（转）

JS改变input的value值不触发onchange事件解决⽅案（转）⽅法（⼀）（转载的⽹络资料）需要了解的知识⾸先，我们需要了解onchange和onpropertychange的不同：IE下，当⼀个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。

onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。

onpropertychange 是IE浏览器的专属⽅法了解这⼀点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。

我们能不能找到另外⼀个时间来代替onpropertychange呢？经过翻阅资料得知，在其他浏览器下可以使⽤oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。

oninput的使⽤下⾯我们先了解⼀下oninput如何使⽤。

如果您是将注册时间直接写在页⾯⾥⾯，那么如下写法就可以实现<input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />但是，将oninput写在JS代码中分离出来时与普通事件注册的⽅法有些不同，必须使⽤addEventListener来注册。

ttachEvent和addEventListener 的不同说到这⾥我们再来了解⼀下 attachEvent和addEventListener 的使⽤⽅法：attachEvent⽅法，为某⼀事件附加其它的处理事件。

（不⽀持Mozilla系列）addEventListener⽅法⽤于 Mozilla系列document.getElementById("btn").onclick = method1;document.getElementById("btn").onclick = method2;document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执⾏var btn1Obj = document.getElementById("btn1");btn1Obj.attachEvent("onclick",method1);btn1Obj.attachEvent("onclick",method2);btn1Obj.attachEvent("onclick",method3);执⾏顺序为method3->method2->method1如果是Mozilla系列，并不⽀持该⽅法，需要⽤到addEventListenervar btn1Obj = document.getElementById("btn1");btn1Obj.addEventListener("click",method1,false);btn1Obj.addEventListener("click",method2,false);btn1Obj.addEventListener("click",method3,false);执⾏顺序为method1->method2->method3了解了如何使⽤addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。

js给文本框动态绑定onblur方法,失焦的时候触发

js给文本框动态绑定onblur方法,失焦的时候触发

1.//以下以失焦时，去掉文本框对应值的前后空格为例；此外存在局部刷新元素也适应，局部刷新后再调用此方法即可。

2.var funMap = {};//记录页面变动之前的所有元素原始onblur方法3.var tmpMap = null;//以元素name为key存储onblur方法，存在当前页面原始onblur方法；4.function bindOnblurEvent(){//绑定对象类型input(type=text) texttarea5. var elements = document.getElementsByTagName('form')[0];6.tmpMap = {};7. if(elements != null){8. for ( var i = 0; i <elements.length; i++) {9. if(elements[i].type == "text" || elements[i].type == "textarea"){10.11. //若有原始onblur，则存入funArr，并放入temMap；12. if(elements[i].onblur != null){13. var tmp = (elements[i].onblur+"").replace(/(\n)+|(\r\n)+/g, "");14. var oldFun = funMap[elements[i].name];//通过name获取原始的onblur方法15. var newFun = tmp.substring(tmp.indexOf("{")+1,tmp.indexOf("}"));16. //防止原始onblur方法被覆盖17. var addFun = typeof oldFun!="undefined" ? oldFun:newFun;18. //当第二次触发bindOnblurEvent()时，当前onblur方法为addOnblurFun()时，不保存（原始onblur为空）19. if(!(addOnblurFun.toString().replace(/(\n)+|(\r\n)+/g, "").indexOf(addFun) > 0)){20. tmpMap[elements[i].name] = addFun;21. }22. }23. //给onblur绑定新的方法24. elements[i].onblur = addOnblurFun;25. }26. }27.funMap = tmpMap;28. }29.}30.31.function addOnblurFun(){32. //input texttarea 所输入的字符串去掉前后空格33.this.value = this.value.replace(/(^\s*)|(\s*$)/g, "");34.35. //调用原始的onblur方法36. //根据当前元素在form表单的位置，从funArr获取原始的onblur方法并调用37. var fun = tmpMap[];38. if(typeof fun != "undefined"){39. //alert("fun = "+fun);40. eval(fun);41. }42.}。

s动态追加onblur方法

s动态追加onblur方法

s动态追加onblur方法【原创实用版2篇】目录（篇1）1.什么是 HTML 的 onblur 事件2.什么是 JavaScript 中的动态追加3.如何在 HTML 中使用动态追加 onblur 方法正文（篇1）一、什么是 HTML 的 onblur 事件onblur 事件是 HTML 中的一种事件，当用户离开一个输入框或者一个文本区域时，该事件就会被触发。

onblur 事件可以用来在用户离开输入框时执行一些操作，例如验证输入的数据或者显示一个提示信息。

二、什么是 JavaScript 中的动态追加动态追加是 JavaScript 中的一种技术，它允许在运行时向 HTML 文档中添加新的内容。

这种技术使得网页可以更加灵活，可以根据用户的操作或者其他条件来动态地改变内容。

三、如何在 HTML 中使用动态追加 onblur 方法要在 HTML 中使用动态追加 onblur 方法，需要先在 HTML 中创建一个输入框或者文本区域，并在其中添加 onblur 事件。

然后，在JavaScript 中编写一个函数，该函数会在 onblur 事件触发时执行。

在函数中，可以使用动态追加技术向 HTML 文档中添加新的内容。

例如，可以创建一个如下的 HTML 页面：```html<!DOCTYPE html><html><head><title>动态追加 onblur 方法示例</title><script>function handleOnBlur() {// 在此处编写动态追加的代码}</script></head><body><input type="text" onblur="handleOnBlur()" /></body></html>```在这个例子中，当用户离开输入框时，handleOnBlur 函数就会被调用。

javascript获取焦点和失去焦点事件

javascript获取焦点和失去焦点事件

javascript获取焦点和失去焦点事件利⽤传参的⽅式提⾼⽅法的复⽤性这⾥涉及到JavaScript的字符串拼接操作</tr><<tr height="40px"><td>⽤户名</td><td><font color="red">*<input type="text" name="user" size="32px" id="user"onfocus="showTips('user','⽤户名必须填！')" onblur="checkuser('user','⽤户名不能为空')"/> <span id="userspan"></span></font></td></tr><tr height="40px"><td>密码</td><td><font color="red">*<input type="password" name="password" id="password" size="32px"onfocus="showTips('password','密码必须填！')" onblur="checkuser('password','密码不能为空')"/> <span id="passwordspan"></span></font></td></tr> <script>function showTips(id,info){document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"}function checkuser(id,info){//1.获取⽤户输⼊的⽤户名数据var uValue=document.getElementById(id).value;//2.进⾏效验if(uValue==""){document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"}else{document.getElementById(id+"span").innerHTML=""}}</script>。

js中失去焦点的方法

js中失去焦点的方法

js中失去焦点的方法在JS中，失去焦点是指当用户离开一个表单元素时，该元素不再处于活动状态。

可以利用JS来检测表单元素失去焦点的情况，并根据需要执行相应的操作。

1. blur()方法blur()方法用于将焦点从当前元素中移除。

当用户从一个表单元素中移开时，可以使用blur()来执行特定的操作。

示例代码：```html<input id='myInput' type='text' onblur='myFunction()'> ``````javascriptfunction myFunction() {// 执行你的操作}```2. focusout()方法focusout()方法与blur()方法类似，但是它可以处理嵌套元素和冒泡事件。

当失去焦点时，会依次触发每个元素的focusout()事件。

示例代码：```html<div id='myDiv' onfocusout='myFunction()'><input type='text'></div>``````javascriptfunction myFunction() {// 执行你的操作}```3. change()方法change()方法用于检测表单元素的值是否改变。

当用户改变表单元素的值并且移开焦点时，会触发change()事件。

示例代码：```html<input id='myInput' type='text' onchange='myFunction()'> ``````javascriptfunction myFunction() {// 执行你的操作}```总结：以上是JS中失去焦点的几种方法，可以根据需要选择使用。

无论使用哪种方法，都可以在表单元素失去焦点时执行特定的操作，提高用户体验。

js中失去焦点的方法

js中失去焦点的方法

js中失去焦点的方法JavaScript（简称JS）是一种基于对象和事件驱动的脚本语言，能够在网页中动态地展示信息和交互。

JS常常用于网页交互、表单验证、动态效果等方面，而失去焦点（blur）是JS中的一种重要事件。

本文将为您详细介绍JS中失去焦点的方法。

JS中的失去焦点事件失去焦点事件，即blur事件，是JS中的一种事件类型。

当一个元素失去焦点时，例如用户点击其他元素或者按下Tab键，该元素就会触发blur事件。

在实际开发中，我们通常使用blur事件来进行表单验证等操作。

在JS中，有许多方法可以用来处理失去焦点事件。

接下来我们将详细介绍一些常用方法。

1. 使用HTML DOMHTML DOM是JS在HTML中的模型，通过HTML DOM，我们可以获得或改变页面中的HTML 元素。

使用HTML DOM处理失去焦点事件，需要使用“onblur”属性，代码如下：```html<input type="text" onblur="myFunction()">```在该代码中，“myFunction()”就是我们定义的处理函数。

当文本框失去焦点时，该函数就会被自动调用。

2. 使用addEventListener()addEventListener()是JS中的一种方法，可以给元素添加事件监听器。

使用addEventListener()处理失去焦点事件的方法如下：```html<input type="text" id="myInput"><script>document.getElementById("myInput").addEventListener("blur", function() {//在这里添加需要执行的代码});</script>```在该代码中，我们为text输入框添加了一个ID为“myInput”的属性，并使用addEventListener()方法将“blur”事件添加到该元素上。

s动态追加onblur方法

s动态追加onblur方法

s动态追加onblur方法（原创版4篇）目录（篇1）1.介绍 HTML 的 onblur 事件2.介绍 JavaScript 中的动态追加方法3.结合实例讲解如何使用动态追加 onblur 方法正文（篇1）一、HTML 的 onblur 事件onblur 事件是 HTML 中的一种事件，当用户离开一个输入框（如文本框、密码框等）时，该事件会被触发。

onblur 事件可以用来在用户离开输入框时执行一些操作，例如提示用户输入的内容或者保存用户输入的内容等。

二、JavaScript 中的动态追加方法在 JavaScript 中，我们可以使用动态追加方法来实现在 onblur 事件触发时执行一些操作。

动态追加方法指的是在 HTML 文档加载完成后，通过 JavaScript 来添加或修改 HTML 元素及其属性。

这种方法可以帮助我们在用户离开输入框时，实时地更新页面内容。

三、实例讲解：使用动态追加 onblur 方法下面我们通过一个实例来说明如何使用动态追加 onblur 方法。

假设我们有一个简单的表单，包括一个用户名输入框和一个密码输入框。

当用户离开用户名输入框时，我们希望在密码输入框后面添加一个“确认密码”的输入框。

1.首先，创建 HTML 文档，设置用户名和密码输入框：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态追加 onblur 方法示例</title></head><body><input type="text" id="username" placeholder="请输入用户名"><input type="password" id="password" placeholder="请输入密码"><script src="script.js"></script></body></html>```2.接下来，创建一个 JavaScript 文件（如 script.js），编写动态追加 onblur 方法的代码：```javascript// 获取用户名输入框和密码输入框var usernameInput = document.getElementById("username");var passwordInput = document.getElementById("password");// 为用户名输入框添加 onblur 事件监听器usernameInput.addEventListener("blur", function() {// 创建一个新的输入框元素var confirmPasswordInput =document.createElement("input");confirmPasswordInput.type = "password";confirmPasswordInput.placeholder = "请确认密码";// 将新的输入框添加到密码输入框后面passwordInput.insertAdjacentElement("afterend", confirmPasswordInput);});```通过上述代码，当用户离开用户名输入框时，将在密码输入框后面动态添加一个“确认密码”的输入框。

老生常谈onBlur事件与onfocus事件（js）

老生常谈onBlur事件与onfocus事件（js）

⽼⽣常谈onBlur事件与onfocus事件（js）onFocus事件就是当光标落在⽂本框中时发⽣的事件。

onBlur事件是光标失去焦点时发⽣的事件。

可以编如下例⼦1.html<HTML><HEAD><TITLE>使⽤onBlur事件处理程序</TITLE></HEAD><BODY BGCOLOR="lavender"><FORM name="F1"><INPUT TYPE=text NAME=text1 value="1111ONBLUR_green" ONBLUR="(document.bgColor='green')"><INPUT TYPE=text NAME=text2 value="2222ONBLUR_black" ONBLUR="(document.bgColor='black')"><INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" ONBLUR="(document.bgColor='yellow')"><br><p><INPUT TYPE=text NAME=text3 value="4444onfocus_blue" onfocus="(document.bgColor='blue')"><INPUT TYPE=text NAME=text4 value="5555onfocus_red" onfocus="(document.bgColor='red')"><INPUT TYPE=text NAME=text4 value="6666onfocus_orange" onfocus="(document.bgColor='orange')"></FORM></BODY></HTML>还有以下例⼦2.html<!-- ⽂件说明：OnFocus事件 --><!-- ------------------------------ --><html><head><title>OnFocus事件</title></head><body><Form><input type="text" name="test1" value="test1" onclick=alert("可以关掉!")><input type="text" name="test1" value="test1" onblur=alert("可以关掉aaaaaaa!")><input type="text" name="test1" value="test1" onclick=alert("可以关掉bbbbbbbbb!")><input type="text" name="test2" value="⼀按我就⽆法关掉了，haha" onFocus=alert("我成为了输⼊焦点!")></Form></body></html>以上这篇⽼⽣常谈onBlur事件与onfocus事件(js)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

js失去焦点的方法

js失去焦点的方法

js失去焦点的方法
JS失去焦点的方法指的是在使用JavaScript编写页面时，如何让页面某个元素在失去焦点时执行特定的操作或逻辑。

常见的失去焦点的方法有以下几种：
1. onBlur事件：该事件会在页面元素失去焦点时触发，可以通过绑定该事件来执行特定的操作或逻辑，例如验证用户输入的内容是否符合要求等。

2. focusout事件：与onBlur事件类似，也是在页面元素失去焦点时触发，可以通过该事件执行特定的操作或逻辑。

3. $(elem).blur()方法：该方法可以用来使指定元素失去焦点，可以通过该方法在特定情况下执行特定的操作或逻辑。

4. document.activeElement属性：该属性可以获取当前获得焦点的元素，可以通过该属性来判断当前是否有元素获得了焦点。

以上就是JS失去焦点的方法的介绍，根据具体的需求选择合适的方法来处理失去焦点的操作可以使页面的交互更加优秀。

- 1 -。

JS事件文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事。。。

JS事件文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事。。。

JS事件⽂本框内容改变事件（onchange）通过改变⽂本框的内容来触发onchange事。

⽂本框内容改变事件（onchange）通过改变⽂本框的内容来触发onchange事件，同时执⾏被调⽤的程序。

如下代码,当⽤户将⽂本框内的⽂字改变后，弹出对话框“您改变了⽂本内容！”。

运⾏结果：任务补充右边编辑器第13⾏，实现改变⽂本框内容时，调⽤message()函数，弹出对话框“您改变了⽂本内容！”。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> ⽂本框内容改变事件 </title><script type="text/javascript">function message(){alert("您改变了⽂本内容！"); }</script></head><body><form>个⼈简介：<br><textarea name="summary" cols="60" rows="5" onchange="message()">请写⼊个⼈简介，不少于200字！</textarea></form></body></html>。

JavaScript【事件】焦点事件

JavaScript【事件】焦点事件

JavaScript【事件】焦点事件以下⼤部分为学习《JavaScript ⾼级程序设计》(第 3 版) 所做笔记。

⽬录：1.2.3.了解焦点事件Q: 焦点事件什么时候触发？A: 当元素获得或失去焦点时触发。

Q: 焦点事件的⽤处？A: 利⽤焦点事件并与 document.hasFocus() ⽅法及 document.activeElement 属性配合，可以知晓⽤户在页⾯上的⾏踪。

Q: 焦点事件有哪些?A: DOMFocusIn DomFocusOut浏览器⽀持blur: 所有浏览器都⽀持DOMFocusIn: 只有 Opera ⽀持DomfocusOut: 只有 Opera ⽀持focus: 所有浏览器都⽀持focusin: ⽀持的浏览器：IE5.5+、Safari5.1+、Opera11.5+、Chromefocusout: ⽀持的浏览器：IE5.5+、Safari5.1+、Opera11.5+、ChromeIE 的 focusin 和 focusout 与 Opera 的 DOMFocusIn 和 DOMFocusout 发⽣重叠， IE 的⽅式最终被 DOM3 级事件采纳为标准⽅式。

不冒泡的事件：blur focus( 即使 blur 跟 focus 不冒泡，也可以在捕获阶段侦听它们。

)在失去焦点的元素上触发, 事件⽬标是失去焦点的元素的事件: focusout blur DomFocusOut在获得焦点的元素上触发, 事件⽬标是获得焦点的元素的事件: focusin focus DomfocusIn当焦点从页⾯的⼀个元素移动到另⼀个元素，会依次触发下列事件：focusout focusin blur DOMFocusOut focus DOMFocusIn检测浏览器是否⽀持事件console.log( "onblur" in window ); //输出：trueconsole.log( "乱打的" in window ); //输出：falsetrue: 浏览器⽀持false: 浏览器不⽀持blur下例实现：在⽂本框中输⼊英⽂，⽂本框时失去焦点之后触发 blur 事件，⽂本框内容⼩写变⼤写⽅式1：通过 JS 来指定事件处理程序<!DOCTYPE html><html><body><script type="text/javascript" src="EventUtil.js"></script><script>//跨浏览器对象 EventUtil//为 window 指定 load 事件处理程序//确保往 DOM 中添加新元素之前页⾯已经加载完毕，如果在页⾯加载完毕之前操作 document.body 会出错EventUtil.addHandler(window, "load", function(event){var event = EventUtil.getEvent();//创建⼀个 input 元素var input1 = document.createElement("input");//设置 input1 的 typeinput1.type = "text";//为 input1 指定 blur 事件，元素失去焦点之后触发 blur 事件⽂本框内⽂本内容⼩写变⼤写EventUtil.addHandler(input1, "blur", function(){this.value = this.value.toUpperCase();});//添加节点 input1document.body.appendChild(input1);});</script></body></html>页⾯表现：在⽂本框内输⼊⼀个单词点击框外，⽂本框失去焦点后，触发了 blur 事件，⽂本框内容⼩写变⼤写⽅式2：为 <input> 元素添加⼀个 onblur 特性<!DOCTYPE html><html><body><script>function fn(){var x = document.getElementById("word");x.value = x.value.toUpperCase();}</script><p>输⼊⼀个单词：</p><input type="text" id="word" onblur="fn()"></body></html>页⾯表现同上。

javascript

javascript

Javascript技巧大集合1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件<input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">点击时文字消失，失去焦点时文字再出现2.网页按钮的特殊颜色<input type=button name="Submit1" value="郭强" size=10 class=s02style="background-color:rgb(235,207,22)">3.鼠标移入移出时颜色变化<input type="submit" value="找吧" name="B1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" class="button">4.平面按钮<input type=submit value=订阅style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt;BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit">5.按钮颜色变化<input type=text name="nick" style="border:1px solid#666666; font-size:9pt; height:17px;BACKGROUND-COLOR: #F4F4FF; color:#ff6600" size="15" maxlength="16">6.平面输入框<input type="text" name="T1" size="20" style="border-style: solid; border-width: 1">7.使窗口变成指定的大小<script>window.resizeTo(300,283);</script>8.使文字上下滚动<marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()'height=60><!-- head_scrolltext --><tr><td>共和国</table> <!-- end head_scrolltext --></marquee>9.状态栏显示该页状态<base onmouseover="window.status='网站建设/' ;return true">10.可以点击文字实现radio选项的选定<br>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="regtype" value="A03" id="A03"> <label for="A03"> 情侣: 一次注册两个帐户</label> <br>11.可以在文字域的font写onclick事件12.打印</a>打印网页<a href='javascript:window.print ()'>13.线型输入框<input type="text" name="key" size="12" value="关键字" onFocus=this.select() onMouseOver=this.focus()class="line">14.显示文档最后修改日期<script language=javascript>function hi(str){document.write(stModified)alert("hi"+str+"!")}</script>15.可以在鼠标移到文字上时就触发事件<html><head><script language="LiveScript"><!-- Hidingfunction hello() {alert("哈罗!");}</script></head><body><a href="" onMouseOver="hello()">link</a></body></html>16.可以根据网页上的选项来确定页面颜色<HTML><HEAD><TITLE>background.html</TITLE></HEAD><SCRIPT><!--function bgChange(selObj) {newColor = selObj.options[selObj.selectedIndex].text;document.bgColor = newColor;selObj.selectedIndex = -1;}//--></SCRIPT><BODY STYLE="font-family:Arial"><B>Changing Background Colors</B><BR><FORM><SELECT SIZE="8" onChange="bgChange(this);"><OPTION>Red<OPTION>Orange<OPTION>Yellow<OPTION>Green<OPTION>Blue<OPTION>Indigo<OPTION>Violet<OPTION>White<OPTION>pink</SELECT></FORM></BODY></HTML>17.将按钮的特征改变<style type="text/css"><!--.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin;border-color: #CCCCFF#CCCCCC #CCCCCC #CCCCFF}.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin;border-color: #CCFF99 #999999 #999999 #CCFF99}--></style>本例按钮的代码如下：<input type="submit" name="Submit" value="提交"onmouseover="this.className='style2'"onmouseout="this.className='style1'" class="style1">18.改变按钮的图片.<style type="text/css"><!--.style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}.style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width:60px; height: 22px}--></style>本例的按钮代码如下：<input type="submit" name="Submit2" value="提交"onmouseover="this.className='style4'"onmouseout="this.className='style3'" class="style3">19.打印页面<div align="center"><a class=content href="javascript:doPrint();">打印本稿</a></div>20.可以直接写html语言document.write("");21.改变下拉框的颜色<select name="classid"onChange="changelocation(document.myform.classid.options[document.myform.classid.s electedIndex].value)"size="1" style="color:#008080;font-size: 9pt">22.转至目标URLwindow.location="http://guoguo"23.传递该object的formUpdateSN('guoqiang99267',this.form)function UpdateSN(strValue,strForm){strForm.SignInName.value = strValue;return false;}24.文字标签<label for="AltName4"><input name="AltName" type="RADIO"tabindex="931" id="AltName4">guoqiang99859</label>yer2为组件的ID，可以控制组件是否可见document.all.item('Layer2').style.display = "block";document.all.item('Layer2').style.display = "none";//26.将页面加入favorite中<script language=javascript><!--function Addme(){url = "http://your.site.address"; //你自己的主页地址title = "Your Site Name"; //你自己的主页名称window.external.AddFavorite(url,title);--></script>//27.过10秒自动关闭页面< script language="JavaScript" >function closeit() {setTimeout("self.close()"，10000)}< /script >28.可以比较字符的大小char=post.charAt(i);if(!('0'<=char&&char<='9'))29.将字符转化为数字month = parseInt(char)30.点击value非空的选项时转向指定连接<select onchange='if(this.value!="")window.open(this.value)' class="textinput"> <option selected>主办单位</option><option>-----------------</option><option value="/">北京日报</option><option value="/">北京晚报</option></select>31.改变背景颜色<td width=* class=dp bgColor=#FAFBFC onmouseover="this.bgColor='#FFFFFF';" onmouseout="this.bgColor='#FAFBFC';">32.改变文字输入框的背景颜色<style>.input2 {background-image: url('../images/inputbg.gif'); font-size: 12px; background-color: #D0DABB;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}</style><input name=content type=text size="47" class="input2" maxlength="50">33.改变水平线的特征<hr size="0" noshade color="#C0C0C0">34.传递参数的方式<a href="vote.asp?CurPage=8&id=3488">8</a>35.页内跳转<a href="#1">1</a><a href="#2">2</a><a href="#3">3</a><a href="#4">4</a><a href="#5">5</a><a href="#6">6</a><a href="#7">7</a><a name="1">dfdf</a><a name="2">dfdf</a>//36.两个按键一起按下if(event.ctrlKey && window.event.keyCode==13)//37.刷新页面javascript:this.location.reload()//38.将网页的按钮使能<SCRIPT LANGUAGE="JavaScript">function haha(){for(var i=0;i<document.form1.elements.length;i++){if(document.form1.elements[i].name.indexOf("bb")!=-1)document.form1.elements[i].disabled=!document.form1.elements[i].disabled; }}</SCRIPT><BODY><form name=form1><INPUT TYPE="button" NAME="aa " value=cindy onclick=haha()><INPUT TYPE="button" NAME="bb " value=guoguo><INPUT TYPE="button" NAME="bb " value=guoguo>39.文字移动<marquee scrollamount=3 onmouseover=this.stop(); onmouseout=this.start();>40.双击网页自动跑<SCRIPT LANGUAGE="JavaScript">var currentpos,timer;function initialize(){timer=setInterval("scrollwindow()",1);}function sc(){clearInterval(timer);}function scrollwindow(){currentpos=document.body.scrollTop;window.scroll(0,++currentpos);if (currentpos != document.body.scrollTop)sc();}document.onmousedown=scdocument.ondblclick=initialize</SCRIPT>//41.后退<INPUT TYPE="button" onclick=window.history.back() value=back>42.前进<INPUT TYPE="button" onclick=window.history.forward() value=forward>43.刷新<INPUT TYPE="button" onclick=document.location.reload() value=reload>44.转向指定网页document.location="http://ww"或者document.location.assign("")45.在网页上显示实时时间<SCRIPT LANGUAGE="JavaScript">var clock_id;window.onload=function(){clock_id=setInterval("document.form1.txtclock.value=(new Date);",1000)}</SCRIPT>//46.可以下载文件document.location.href="目标文件"//47.连接数据库import java.sql.*;String myDBDriver="sun.jdbc.odbc.JdbcOdbcDriver";Class.forName(myDBDriver);Connection conn=DriverManager.getConnection("jdbc:odbc:firm","username","password"); Statement stmt=conn.createStatement();ResultSet rs=stmt.executeQuery(sql);rs.getString("column1");//48.可以直接在页面“div”内写下所需内容<INPUT TYPE="button" onclick="a1.innerHTML='<font color=red>*</font>'"><div id=a1></div>//49.可以改变页面上的连接的格式，使其为双线<style>A:link {text-decoration: none; color:#0000FF; font-family: 宋体}A:visited {text-decoration: none; color: #0000FF; font-family: 宋体}A:hover {text-decoration: underline overline; color: FF0000}</style><style>A:link {text-decoration: none; color:#0000FF; font-family: 宋体}A:visited {text-decoration: none; color: #0000FF; font-family: 宋体}A:hover {text-decoration: underline overline line-through; color: FF0000}TH{FONT-SIZE: 9pt}TD{FONT-SIZE: 9pt}body {SCROLLBAR-FACE-COLOR: #A9D46D; SCROLLBAR-HIGHLIGHT-COLOR:#e7e7e7;SCROLLBAR-SHADOW-COLOR:#e7e7e7;SCROLLBAR-3DLIGHT-COLOR: #000000; LINE-HEIGHT: 15pt; SCROLLBAR-ARROW-COLOR: #ffffff;SCROLLBAR-TRACK-COLOR: #e7e7e7;}INPUT{BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px;BORDER-LEFT-WIDTH: 1px; FONT-SIZE:9pt; BORDER-LEFT-COLOR: #cccccc;BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM:1px; BORDER-TOP-COLOR: #cccccc;PADDING-TOP: 1px; HEIGHT: 18px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc}DIV,form ,OPTION,P,TD,BR{ FONT-SIZE: 9pt}textarea, select {border-width: 1; border-color: #000000; background-color: #efefef;font-family: 宋体;font-size: 9pt; font-style: bold;}.text { font-family: "宋体"; font-size: 9pt; color: #003300; border: #006600 solid;border-width: 1px 1px1px 1px}</style>完整的css50.新建frame<ahref="javascript:newframe('/help/a_little/index.html','http://www.163 .net/help/a_little/a_13.html')"><img alt=帮助border=0src="/Files/Pic/2007-9/13/JFCC87I9H8A63D7516.gif"></a>51.向文件中写内容<%@ page import="java.io.*" %><%String str = "print me";//always give the path from root. This way it almost always works.String nameOfTextFile = "/usr/anil/imp.txt";try{PrintWriter pw = new PrintWriter(new FileOutputStream(nameOfTextFile));pw.println(str);//clean uppw.close();}catch(IOException e){out.println(e.getMessage());}%>52.先读文件再写文件<%@ page language = "java" %><%@ page contentType = "text/html; charSet=gb2312" %><%@ page import ="java.util.*" %><%@ page import ="ng.*" %><%@ page import ="javax.servlet.*" %><%@ page import ="javax.servlet.jsp.*" %><%@ page import ="javax.servlet.http.*" %><%@ page import="java.io.*" %>eryrytry<%int count=0;FileInputStream fi =new FileInputStream ("count.txt");ObjectInputStream si= new ObjectInputStream (fi);count =si.readInt();count++;out.print(count);si.close();FileOutputStream fo =new FileOutputStream ("count.txt");ObjectOutputStream so= new ObjectOutputStream (fo);so.writeInt(count);so.close();%>53.直线型输入框<INPUT name=Password size=10 type=password style="border-left-width: 0;border-right-width: 0;border-top-width: 0; border-bottom-style: solid; border-bottom-width: 1; background-color: #9CEB9C">54.可以将背景改为按钮性状，通过改变css改变属性<td width="65" align="center" bgcolor="#E0E0E0"onmouseover=this.className='mouseoverbt';onmouseout=this.className='mouseout';><a href="tm.asp?classid=76"><fontcolor="#000000">录音笔</font></a></td><style>.mouseoverbt{background-image: url(/img/btbgw64h20y.gif);background-repeat: no-repeat;}.mouseout{background-color: #E0E0E0;}</style>55.同时按下CTRL和Q键document.onkeydown=function(){if(event.ctrlKey&&event.keyCode==81){alert(1)}}//56.以下是一个完整的显示hint的代码，其思想是当鼠标停留是将div中的内容显示在鼠标出，当鼠标移出后在将该div隐藏掉---------------------------------------------------------------------------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><style>#hint{width:198px;border:1px solid #000000;background:#99ff33;position:absolute;z-index:9;padding:6px;line-height:17px;text-align:left;top: 1520px;}</style><SCRIPT LANGUAGE="JavaScript"><!--function showme(){var oSon=window.document.getElementById("hint");if (oSon==null) return;with (oSon){innerText=guoguo.value;style.display="block";style.pixelLeft=window.event.clientX+window.document.body.scrollLeft+6;style.pixelTop=window.event.clientY+window.document.body.scrollTop+9;}}function hidme(){var oSon=window.document.getElementById("hint");if (oSon==null) return;oSon.style.display="none";}//--></SCRIPT><BODY><text id=guoguo value=ga><a href=# onmouseover=showme() onmouseout=hidme() onmousemove=showme()son=hint>dfdfd</a><div id=hint style="display:none"></div></BODY></HTML>---------------------------------------------------------------------------------------------------------------------57.弹出窗口方法一：<body onload="openwen()"> 浏览器读页面时弹出窗口；方法二：<body onunload="openwen()"> 浏览器离开页面时弹出窗口；方法三：用一个连接调用：<a href="#" onclick="openwin()">打开一个窗口</a>注意：使用的"#"是虚连接。

什么叫失去焦点文本框失去焦点是什么意思？

什么叫失去焦点文本框失去焦点是什么意思？

什么叫失去焦点⽂本框失去焦点是什么意思？话题0：⽂本框失去焦点是什么意思？回答：⽂本框失去焦点主要是jQuery中想执⾏某个⽅法动作。

这个⽅法动作执⾏的前提就是当⽂本框失去焦点的条件判断。

焦点在⽂本框上即当⿏标移上⽂本框的时候那个⼀闪⼀闪的光标，失去焦点就是⿏标不在⽂本框内话题1：JS中窗体元素失去焦点是什么意思回答：JSP表单元素获取焦点就是指你的text,password等元素⾥有⿏标的光标. 同理 JSP失去焦点例如浏览器上⽅标题是蓝⾊的时候就证明焦点就在这⾥当你点其他页⾯的时候它会变灰.就是失去焦点.原理都⼀样.话题2：onblur 是控件在失去焦点的时候触发的事件是什么意思回答：onblur事件只有表单元素具有这个事件!⽐如说⼀个输⼊⽤户名的登陆框,你把⿏标点上去,光标变⼀闪⼀闪的提⽰你输⼊信息,这个时候就是得到焦点,就会触发onfocus事件,当你把⿏标点击到输⼊框外,这个时候就是失去焦点,就会触发onblur事件,⼀个表单元话题1：窗⼝失去焦点是什么意思回答：就是说当前活动窗⼝已经不是那个窗⼝，那个窗⼝不能再接受⿏标和键盘的输⼊。

话题0：HTML 元素失去焦点的事件名称是什么？(javascript)回答：我打个⽐⽅吧，在京东⾸页搜索框中有默认的关键词，你⿏标点击搜索框关键词消失，搜索框为空⽩也就是没有默认的关键词了，就是失去焦点；你⿏标放在搜索框范围外任意处再点击，你会发现搜索框中⼜出现了原来默认的那⼏个关键词，这个就是得到焦话题1：运⾏窗⼝⿏标⽼是⽆故丢失焦点怎么解决？我是win7回答：你这个问题我也遇到了，⽬前我判断是招商银⾏专业版造成的，我将其卸载了但还是有问题，我怀疑是没有卸载⼲净。

也可能是其他软件的问题，你也可以调查⼀下。

更正⼀下，查到了，我的机器上因为“BCMWLTRY.EXE”错误造成的抢焦点，你可以在“计算机”话题2：HTML和JS中所谓的“焦点”是指什么？回答：?5a8沟慵垂獗? 焦点是在页⾯上屏幕中闪动的的⼩竖线，⿏标点击可获得光标，Tab键可按照设置的Tabindex切换焦点⽹页元素获取光标可使⽤js或jQuery调⽤获得焦点：$('#id').focus();或 $('#id').focus(fn) 失去焦点：（⼀般作为验证触发） $('p').b话题1：JS中，何为⿏标失去焦点事件？？回答：⽐如⼀个⽂本框中，光标在⽂本框中将会出发onblue 事件光标从⽂本框中转移将会出发onfocus事件。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1.//以下以失焦时，去掉文本框对应值的前后空格为例；此外存在局部刷新元素也适应，局部刷新
后再调用此方法即可。

2.var funMap = {};//记录页面变动之前的所有元素原始onblur方法
3.var tmpMap = null;//以元素name为key存储onblur方法，存在当前页面原始onblur方
法；
4.function bindOnblurEvent(){//绑定对象类型input(type=text) texttarea
5. var elements = document.getElementsByTagName('form')[0];
6.tmpMap = {};
7. if(elements != null){
8. for ( var i = 0; i <elements.length; i++) {
9. if(elements[i].type == "text" || elements[i].type == "textarea")
{
10.
11. //若有原始onblur，则存入funArr，并放入temMap；
12. if(elements[i].onblur != null){
13. var tmp = (elements[i].onblur+"").replace(/(\n)+|(\r\n)+
/g, "");
14. var oldFun = funMap[elements[i].name];//通过name获取原始
的onblur方法
15. var newFun = tmp.substring(tmp.indexOf("{")+1,tmp.indexO
f("}"));
16. //防止原始onblur方法被覆盖
17. var addFun = typeof oldFun!="undefined" ? oldFun:newFun;
18. //当第二次触发bindOnblurEvent()时，当前onblur方法为
addOnblurFun()时，不保存（原始onblur为空）
19. if(!(addOnblurFun.toString().replace(/(\n)+|(\r\n)+/g, "
").indexOf(addFun) > 0)){
20. tmpMap[elements[i].name] = addFun;
21. }
22. }
23. //给onblur绑定新的方法
24. elements[i].onblur = addOnblurFun;
25. }
26. }
27.funMap = tmpMap;
28. }
29.}
30.
31.function addOnblurFun(){
32. //input texttarea 所输入的字符串去掉前后空格
33.this.value = this.value.replace(/(^\s*)|(\s*$)/g, "");
34.
35. //调用原始的onblur方法
36. //根据当前元素在form表单的位置，从funArr获取原始的onblur方法并调用
37. var fun = tmpMap[];
38. if(typeof fun != "undefined"){
39. //alert("fun = "+fun);
40. eval(fun);
41. }
42.}。

相关主题