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

合集下载

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事件是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各种事件如：点击事件、失去焦点、键盘事件等事件驱动：我们点击按钮按钮去掉⽤相应的⽅法。

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 使用的例子

在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()方法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控制输⼊框获得和失去焦点时状态显⽰的⽅法。

分享给⼤家供⼤家参考。

具体实现⽅法如下：<!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"></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）中获得⽂本框焦点和失去焦点的⽅法先来看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事件解决⽅案（转）⽅法（⼀）（转载的⽹络资料）需要了解的知识⾸先，我们需要了解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事件后我们再回到要解决的问题[划分浏览器]。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
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.}。