js监听input输入框支持主流浏览器
Javascript利用方向键（上下键）控制表格的行选中（兼容各个浏览器）IT驿站
Javascript利用方向键（上下键）控制表格的行选中（兼容各个浏览器）IT驿站[ad#content]这两天正在做一个通过Javascript实现用键盘的方向键来控制表格的行选中功能，自己写了个小脚本，放到这里方便以后使用。
这个脚本一共两个文件，首先是JS文件（tablecontrol.js）：1.var currentLine=-1, offsetTr = 0;2.var $ =function(id){ return document.getElementById(id); }3.function keyDownEvent(e){4.var e = window.event||e;5.if(e.keyCode==38){6.offsetTr = 0;7.currentLine--;8.changeItem();9.}else if(e.keyCode==40){10.offsetTr = 150;11.currentLine++;12.changeItem();13.}else if(e.keyCode==13&¤tLine>-1){14.addUser();15.}16.return false;17.}18.function changeItem(){19.if(!$('buddyListTable')) return false;20.var it = $('buddyListTable');21.if(document.all){22.it = $('buddyListTable').children[0];23.}24.changeBackground();25.if(currentLine<0) currentLine = it.rows.length-1;26.if(currentLine >= it.rows.length) currentLine = 0;27.it.rows[currentLine].className = "buddyListHighLight";28.if($('allBuddy')){29.$('allBuddy').scrollTop = it.rows[currentLine].offsetT op-offsetTr;30.}31.}32.function changeBackground(){33.var it = $('buddyListTable');34.if(document.all){35.it = $('buddyListTable').children[0];36.}37.for(var i=0; i<it.rows.length; i++){38.if(i%2==0){39.it.rows[i].className = "buddyListOdd";40.}else{41.it.rows[i].className = "buddyListEven";42.}43.}44.}45.function addUser(){46.var it = $('buddyListTable');47.if(document.all){48.it = $('buddyListTable').children[0];49.}50.var trBody = it.rows[currentLine].innerHTML;51.$('result').innerHTML = $('result').innerHTML+trBody;52.}下面是HTML文件：1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2.<html xmlns="/1999/xhtml">3.<head>4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5.<script language="javascript" src="tablecontrol.js"></script>6.<style type="text/css">7..buddyListOdd{8.background-color:#f0f0f0;9.}10..buddyListEven{11.background-color:#ffffff;12.}13..buddyListHighLight{14.background-color:#DCE2E8;15.}16.</style>17.</head>18.<body>19.<div style="width: 312px; height: 180px; overflow-y: scroll; overflow-x: hidden;color:#747678" id="allBuddy">20.<table cellspacing="0" cellpadding="0" border="0" width="100%" id="buddyListTable"><tbody>21.<tr class="buddyListOdd">23.<td align="left" valign="middle">AAAAAA</td>24.<td align="left">+861311111111</td>25.</tr>26.<tr class="buddyListEven">27.<td width="26px"><input type="checkbox"></td>28.<td align="left" valign="middle">BBBBBB</td>29.<td align="left">+861322222222</td>30.</tr>31.<tr class="buddyListOdd">32.<td width="26px"><input type="checkbox"></td>33.<td align="left" valign="middle">CCCCCC</td>34.<td align="left">+861333333333</td>35.</tr>36.<tr class="buddyListEven">37.<td width="26px"><input type="checkbox"></td>38.<td align="left" valign="middle">DDDDDD</td>39.<td align="left">+861344444444</td>40.</tr>41.<tr class="buddyListOdd">42.<td width="26px"><input type="checkbox"></td>43.<td align="left" valign="middle">EEEEEE</td>44.<td align="left">+861355555555</td>45.</tr>46.<tr class="buddyListEven">47.<td width="26px"><input type="checkbox"></td>48.<td align="left" valign="middle">FFFFFF</td>49.<td align="left">+861366666666</td>50.</tr>51.<tr class="buddyListOdd">53.<td align="left" valign="middle">GGGGGG</td>54.<td align="left">+861366666666</td>55.</tr>56.<tr class="buddyListEven">57.<td width="26px"><input type="checkbox"></td>58.<td align="left" valign="middle">HHHHHH</td>59.<td align="left">+861377777777</td>60.</tr>61.<tr class="buddyListOdd">62.<td width="26px"><input type="checkbox"></td>63.<td align="left" valign="middle">IIIIII</td>64.<td align="left">+861388888888</td>65.</tr>66.<tr class="buddyListEven">67.<td width="26px"><input type="checkbox"></td>68.<td align="left" valign="middle">GGGGGG</td>69.<td align="left">+861300000000</td>70.</tr>71.<tr class="buddyListOdd">72.<td width="26px"><input type="checkbox"></td>73.<td align="left" valign="middle">KKKKKK</td>74.<td align="left">+861321111111</td>75.</tr>76.<tr class="buddyListEven">77.<td width="26px"><input type="checkbox"></td>78.<td align="left" valign="middle">LLLLLL</td>79.<td align="left">+861322222222</td>80.</tr>81.<tr class="buddyListOdd">83.<td align="left" valign="middle">MMMMMM</td>84.<tdalign="left">+86132****3333</td>85.</tr>86.<tr class="buddyListEven">87.<td width="26px"><input type="checkbox"></td>88.<td align="left" valign="middle">NNNNNN</td>89.<td align="left">+861311111111</td>90.</tr>91.</tbody>92.</table>93.</div>94.<div>95.首先把鼠标焦点放入下面的输入框，然后按键盘的上下键，可以看到表格中的行被高亮选中<br />96.<input type="text" onkeyup="return keyDownEvent(event);"/><br />97.按回车后，相对应的表格项会出现在下面，当然这只是一个简单的Demo，复杂的操作开发者可以自己添加<br />98.<table id="result"></table>99.</div>100.</body>101.</html>。
JS监听input框的回车事件、属性值改变事件
JS监听input框的回车事件、属性值改变事件
⼀、介绍
在程序猿门的⼯作中，经常会遇见⼀些表单数据的提交，对于有表单的东西⽽⾔，input输⼊框是⾮常常见的，所以对于⼀些input的基本事件，我们需要去掌握
⼆、input的监听enter事件
⽐如我现在⼜这么⼀个输⼊框，想要监听他的回车键事件，案列如下
<input id="btn" type="text">
//输⼊框的enter事件
$('#btn').bind('keydown',function(event){
if(event.keyCode == "13") {
alert(1111);
}
});
三、input的熟悉propertychange事件
⽐如我现在有这么⼀个输⼊框，当他的值发⽣改变时，我想获取他的值
<input id="btn" type="text">
//输⼊框的属性事件
$('#btn').bind('input propertychange',function() {
alert("1111");
});。
js解析 readastext filereader -回复
js解析readastext filereader -回复题目：理解和应用JavaScript中的readAsText和FileReader摘要：在JavaScript中，readAsText和FileReader是常用的文件读取方法和对象，用于将文件内容转换为可供JavaScript处理的文本数据。
本文将逐步解析如何使用readAsText方法和FileReader对象，并提供一些常见应用案例和注意事项。
第一部分：了解readAsText方法在JavaScript中，readAsText是FileReader对象的一个方法，它用于读取文件，并将其内容转换为文本字符串。
readAsText方法接收一个参数，即要读取的文件对象。
下面是使用readAsText进行文件读取的基本步骤：1. 创建一个FileReader对象：使用`new FileReader()`来创建一个新的FileReader对象。
2. 监听文件加载事件：使用`onload`事件监听器来检测文件是否已加载完毕，若加载完毕则执行相应的逻辑。
3. 调用readAsText方法：使用`readAsText(file)`来读取指定的文件对象。
例子：javascriptdocument.getElementById("file-input").addEventListener("change", function(event) {var file = event.target.files[0];var reader = new FileReader();reader.onload = function() {var fileData = reader.result;console.log(fileData);}reader.readAsText(file);});上面的例子展示了如何监听一个文件输入框（input[type="file"]）的`change`事件，当用户选择一个文件后，使用readAsText方法读取文件内容，并通过控制台打印出来。
JS加入收藏夹的代码（主流浏览器通用）
JS加⼊收藏夹的代码（主流浏览器通⽤）所有浏览器通⽤的js添加收藏夹代码复制代码代码如下:<script>function addfavorite(){if (document.all){window.external.addFavorite('','XXX');}else if (window.sidebar){window.sidebar.addPanel('XXX', '', "");}}</script><a href="#" onclick="addfavorite()">XXX</a>打开,另存为,属性,打印"等14个JS代码■刷新■■导⼊收藏■■导出收藏■■整理收藏夹■■查看原⽂件■■语⾔设置■■打开■<input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>■另存为■<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为><OBJECTclassid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>■属性■<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性><OBJECTclassid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>■打印■<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印><OBJECTclassid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>■页⾯设置■<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页⾯设置><OBJECTclassid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>■刷新■<input type=button value=刷新 name=refresh onclick="window.location.reload()">■导⼊收藏■<input type="button" name="Button" value="导⼊收藏夹" onClick=window.external.ImportExportFavorites(true,);>■导出收藏■<input type="button" name="Button3" value="导出收藏夹" onClick=window.external.ImportExportFavorites(false,);>■加⼊收藏■<INPUT name=Button2 onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加⼊收藏夹>■整理收藏夹■<INPUT name=Submit2 onclick="window.external.ShowBrowserUI(OrganizeFavorites, null)" type=button value=整理收藏夹>■查看原⽂件■<INPUT name=Button onclick=window.location = "view-source:" + window.location.href type=button value=查看源⽂件>■语⾔设置■<INPUT name=Button onclick="window.external.ShowBrowserUI(LanguageDialog, null)" type=button value=语⾔设置>■前进■<INPUT name=Submit onclick=history.go(1) type=submit value=前进>■后退■<INPUT name=Submit2 onclick=history.go(-1) type=submit value=后退>- 作者： gatebill 2005年11⽉1⽇, 星期⼆ 12:42 回复（0） | 引⽤（0）加⼊博采JS实现浏览器菜单命令每当我们看到别⼈⽹页上的打开、打印、前进、另存为、后退、关闭本窗⼝、禁⽤右键等实现浏览器命令的链接，⽽⾃⼰苦于不能实现时，是不是感到很遗憾？是不是也想实现？如果能在⽹页上能实现浏览器的命令，将是多么有意思的事啊！下⾯我们就来看看如何⽤Javascript代码实现浏览器菜单命令(以下代码在Windows XP下的浏览器中调试通过)。
JS针对浏览器窗口关闭事件的监听方法集锦
JS针对浏览器窗⼝关闭事件的监听⽅法集锦本⽂实例总结了JS针对浏览器窗⼝关闭事件的监听⽅法。
分享给⼤家供⼤家参考，具体如下：⽅式⼀：(适⽤于IE浏览器，⽽且刷新不提⽰，只在点击浏览器关闭按钮的时候提⽰)<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){return "您要离开吗？";}}</script>⽅式⼆：适⽤于IE和FF，不区分刷新和关闭<script type="text/javascript">window.onbeforeunload = onbeforeunload_handler;window.onunload = onunload_handler;function onbeforeunload_handler(){var warning="确认退出?";return warning;}function onunload_handler(){var warning="谢谢光临";alert(warning);}</script>⽅式三：适⽤于IE和FF，不区分刷新和关闭，最简单的<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){return "您确定退出吗？";}</script>⽅式四：适⽤于IE和FF，不区分刷新和关闭，稍复杂的<script language="javascript">var MSG_UNLOAD="如果你此时离开档案系统，所做操作信息将全部丢失，是否离开?";var UnloadConfirm = {};//启⽤监听浏览器刷新、关闭的⽅法UnloadConfirm.set = function(confirm_msg){window.onbeforeunload = function(event){event = event || window.event;event.returnValue = confirm_msg;}}//关闭监听浏览器刷新、关闭的⽅法UnloadConfirm.clear = function(){window.onbeforeunload = function(){};}UnloadConfirm.set(MSG_UNLOAD);</script>⽅式五：只适⽤于IE6下的关闭按钮和快捷键关闭的，刷新不提⽰<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){var warnning = '<fmt:message key="systemMessage.exitWarning" />';var beforeExit='<fmt:message key="systemMessage.beforeExitWarning" />';if(event.clientY<0 && event.clientX>document.body.clientWidth-20 || event.clientY<0 && event.clientX<20 ||event.altKey || event.ctrlKey || event.clientY>document.body.clientHeight){alert(beforeExit);return warnning;}}</script>另附判断浏览器类型的JS<script type="text/javascript">var Sys = {};var ua = erAgent.toLowerCase();if (window.ActiveXObject)Sys.ie = ua.match(/msie ([\d.]+)/)[1]else if (document.getBoxObjectFor)Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]else if (window.MessageEvent && !document.getBoxObjectFor)Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]else if (window.opera)Sys.opera = ua.match(/opera.([\d.]+)/)[1]else if (window.openDatabase)Sys.safari = ua.match(/version\/([\d.]+)/)[1];//以下进⾏测试if(Sys.ie) document.write('IE: '+Sys.ie);if(Sys.firefox) document.write('Firefox: '+Sys.firefox);if(Sys.chrome) document.write('Chrome: '+Sys.chrome);if(Sys.opera) document.write('Opera: '+Sys.opera);if(Sys.safari) document.write('Safari: '+Sys.safari);</script>区分浏览器，IE和FF分别处理（奇怪的是,IE下有时候失效）<script type="text/javascript">window.onbeforeunload=onclose;function onclose(){var Sys = {};var warnning = '<fmt:message key="systemMessage.exitWarning" />';var ua = erAgent.toLowerCase();if (window.ActiveXObject)Sys.ie = ua.match(/msie ([\d.]+)/)[1]else if (document.getBoxObjectFor)Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]if(Sys.ie) {//for IEif(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){window.event.returnValue = warnning ;}}if(Sys.firefox) //for FFreturn warnning;}</script>最简单的判断浏览器类型的⽅法<script type="text/javascript">if(-[1,]){alert("这不是IE浏览器！");}else{alert("这是IE浏览器！");}</script>[1，]在标准浏览器会返回字符串"1",相当于调⽤[1,].toString,,IE则返回"1,"。
input在js中的用法
input在js中的用法JavaScript中的input元素是一个用于获取用户输入的常用元素。
通过使用input元素，可以收集用户的各种类型的信息，例如文本、数字、日期、密码等。
在JavaScript中，我们可以通过DOM操作来处理input元素的各种事件和行为。
以下是在JavaScript中使用input元素的常用用法。
1. 获取输入值我们可以通过JavaScript的DOM操作来获取input元素的当前值。
可以使用`document.getElementById()`或`document.querySelector()`等方法来获取input元素，然后使用`value`属性来获取输入值。
例如：```javascriptvar inputValue = document.getElementById("myInput").value;```这将获取id为"myInput"的input元素的当前值。
2. 监听输入事件我们可以通过监听input元素的事件来处理用户输入。
常用的输入事件包括`input`和`change`。
在`input`事件中，用户每次输入都会触发该事件，而在`change`事件中，只有在用户离开输入字段（即输入结束或值更改）时才会触发。
例如：```javascriptdocument.getElementById("myInput").addEventListener("input", function() {// 处理输入事件的代码});```这将为id为"myInput"的input元素添加一个监听器，当用户输入时，将执行指定的函数。
3. 验证输入值我们可以使用JavaScript来验证input元素的输入值是否符合预期的格式或范围。
例如，我们可以验证用户是否输入了一个有效的电子邮件地址。
input 输入框离开输入框触发函数
input 输入框离开输入框触发函数一、背景介绍在网页开发中，输入框是一个常用的组件，它允许用户输入文本信息。
当用户在输入框中输入文本时，开发者通常会编写一些代码来监听输入框的变化，并在用户离开输入框时触发某些函数。
这种功能可以帮助开发者实现一些常见的交互效果，如焦点变化、表单验证等。
二、实现方法要实现输入框离开输入框触发函数，可以采用以下方法：1. 使用 JavaScript 监听输入框的 input 事件，当用户输入或离开输入框时触发该事件。
2. 在 input 事件的处理函数中，判断用户是否真的离开了输入框。
可以通过监听输入框的失去焦点事件来实现。
3. 在失去焦点事件的处理函数中，执行需要触发的函数操作。
以下是一个简单的示例代码，展示如何实现输入框离开输入框触发函数：HTML 代码：```php<input type="text" id="inputBox" placeholder="请输入内容">```JavaScript 代码：```javascriptdocument.getElementById("inputBox").addEventListener("inp ut", function(event) {// 当用户离开输入框时触发函数if (event.target.id === "inputBox") {document.getElementById("inputBox").addEventListener("blur", function() {// 在这里编写需要触发的函数操作console.log("用户离开了输入框");});}});```三、应用场景输入框离开输入框触发函数可以应用于多种场景，如表单验证、焦点变化等。
js addeventlistener方法
js addeventlistener方法（最新版3篇）目录（篇1）1.事件监听器的概念2.addeventlistener 方法的作用3.addeventlistener 方法的语法4.addeventlistener 方法的参数5.addeventlistener 方法的返回值6.addeventlistener 方法的实例正文（篇1）事件监听器是一种在网页上响应特定事件的编程技术。
在JavaScript 中，我们可以使用 addeventlistener 方法来为指定元素添加事件监听器。
addeventlistener 方法的作用是为指定元素添加一个或多个事件监听器，以便在某个事件发生时执行相应的处理函数。
addeventlistener 方法的语法如下：```element.addeventlistener(eventType, handler, useCapture);```其中，element 表示要添加事件监听器的 HTML 元素；eventType 表示要监听的事件类型，如"click"、"mouseover"等；handler 表示事件发生时要执行的处理函数；useCapture 表示是否在捕获阶段触发事件处理函数，默认为 false。
addeventlistener 方法的返回值是事件监听器本身，以便通过removeEventListener 方法删除该监听器。
下面是一个 addeventlistener 方法的实例：```javascript// 创建一个处理函数，用于在点击按钮时显示提示信息function handleClick() {alert("按钮被点击了！");}// 为页面上的按钮添加一个点击事件监听器document.querySelector("button").addeventlistener("click", handleClick);```在这个例子中，当用户点击按钮时，会弹出一个提示框显示"按钮被点击了！"。
js验证input输入框
js验证input输⼊框<h1>js验证输⼊框内容</h1><br /><br />只能输⼊英⽂<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"><br /><br />只能输⼊英⽂<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')"onkeydown="fncKeyStop(event)" onpaste="return false"oncontextmenu="return false" />⽆法粘贴，右键不会弹出粘贴菜单<br /><br />只能输⼊数字：<input onkeyup="this.value=this.value.replace(/\D/g,'')"onafterpaste="this.value=this.value.replace(/\D/g,'')"><br /><br />只能输⼊数字，⼩数点：<input name="price" type="text"onkeyup="value=value.replace(/[^\d\.]/g,'')"><br /><br />只能输⼊数字，⼩数点，下划线：<input name="price" type="text"onkeyup="value=value.replace(/[^\d\._]/g,'')"><br /><br />只能输⼊英⽂和数字：<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br /><br />只能输⼊汉字：<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br /><br />禁⽌输⼊法输⼊：<input type="text" style="ime-mode: disabled">⽆法切换输⼊法<br /><br />只能输⼊中⽂、英⽂、数字、@符号和.符号：<input type="text"onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')">只能输⼊中⽂、英⽂、数字、？符号和.符号，。
vue.js项目el-input组件监听回车键实现搜索功能示例
vue.js项⽬el-input组件监听回车键实现搜索功能⽰例基于element-ui 组件开发的vue.js项⽬，实现回车键发起搜索，和原⽣的input 标签使⽤⽅法不⼀样：el-input 监听键盘按下状态得⽤@keyup.enter.native,如果是⾮el-input 组件，可以直接⽤@keyup.enter<el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input><input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">在methods⽅法集⾥，写上监听的⽅法，当获取的keyCode 为13时，表⽰按下了回车键，如果需要监听空格或者其他键，换成别的键值searchEnterFun:function(e){var keyCode = window.event? e.keyCode:e.which;// console.log('回车搜索',keyCode,e);if(keyCode == 13 && this.input){this.$router.push({path:'/Share?keywords='+this.input});}}which 和 keyCode 属性提供了解决浏览器的兼容性的⽅法。
keyCode属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码注意：在 Firefox 中，keyCode 属性在 onkeypress 事件中是⽆效的 (返回 0)。