下载文档原格式
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事件是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各种事件如：点击事件、失去焦点、键盘事件等事件驱动：我们点击按钮按钮去掉⽤相应的⽅法。
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(); }。
在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()方法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控制输⼊框获得和失去焦点时状态显⽰的⽅法。
分享给⼤家供⼤家参考。
具体实现⽅法如下：<!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）中获得⽂本框焦点和失去焦点的⽅法先来看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事件解决⽅案（转）⽅法（⼀）（转载的⽹络资料）需要了解的知识⾸先，我们需要了解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.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方法【原创实用版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 函数就会被调用。
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.}。
