循环监听输入框回车事件

1.第一种简单写法

function getKey(){
        if(event.keyCode==13){
            document.getElementById("password").focus();
        }
    }
    function getKey2(){
        if(event.keyCode==13){
            document.getElementById("tel").focus();
        }
    }
    function getKey3(){
        if(event.keyCode==13){
            document.getElementById("email").focus();
        }
    }
    function getKey4(){
        if(event.keyCode==13){
            document.getElementById("username").focus();
        }
    }
用户名:<input type="text" name="username" id="username" onkeypress="getKey();"></input>
        <br>
        密码:<input type="text" name="password" id="password" onkeypress="getKey2();"></input>
        <br>
        号码:<input type="text" name="tel" id="tel" onkeypress="getKey3();"></input>
        <br>
        邮箱:<input type="text" name="email" id="email" onkeypress="getKey4();"></input>

2.第二种循环写法

function init(){
    var aDivs = document.getElementsByTagName(‘input‘);//获取多个input集合
    for(var i=0; i<aDivs.length; i++){
      aDivs[i].index=i;
      aDivs[i].onkeypress=function(){
              if(event.keyCode==13){

                  var c=parseInt(this.index)+parseInt(1);

            document.getElementById(aDivs[c].id).focus();
        }
    }
}}  

解释:(aDivs[i].index=i;)通过给对象添加变量的方式解决了问题,就是每次把i保存下来作为对象的一个属性;

 ************************************* 

另外的处理变量i的问题:

var aDivs = document.getElementsByTagName(‘div‘);//获取多个div集合
for(var i=0; i<aDivs.length; i++){
      add(i);
}
function add(i){
    aDivs[i].onclick=function(){
           alert(i);
    }
} 

解释:利用闭包解决了闭包本身带来的问题;

以上内容所参考的页面:http://blog.csdn.net/playboyanta123/article/details/17241597

时间: 2024-10-09 20:50:31

循环监听输入框回车事件的相关文章

vue 监听 input 回车事件

<el-input size="small" placeholder="搜索..." v-model="searchParam.quick_query" @keyup.13="enter"> 这样监听回车事件没有效果,input的原生事件被vue隐藏了,如果要调用原生事件,需要在事件后添加`.native`修饰符.如下: <el-input size="small" placeholder

element ui输入框监听enter回车事件

注意的要与@click=""一致; 原文地址:https://www.cnblogs.com/linman/p/10138897.html

巧用 即刻搜索事件 input propertychange 监听输入框字数

实时监听输入框的字数,大于200时,不再输入. 即时搜索: propertychange(ie)和input事件(常用) input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化 propertychange,只要当前对象属性发生改变.(IE专属的) <div class="container js_container"> <div class="weui-cells

libevent (三) 事件注册与循环监听

事件注册与循环监听 在libevent中为了监听某种事件的发生,设置事件触发后的回调函数,也就是说对该事件注册到当前的IO模型中. 事件注册 事件初始化 使用`event_new`函数来对事件进行初始化. typedef void (*event_callback_fn)(evutil_socket_t, short, void *);/* 回调函数 */ struct event *event_new(struct event_base *base, evutil_socket_t fd, s

实时监听输入框值变化的完美方案:oninput &amp; onpropertychange

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发.oninput 事件在主流浏览器的兼容情况如下: 从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接

移动端用js与jquery实时监听输入框值的改动

背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android和iOS都可以触发的keyDown和keyUp. 于是,百度出了新东西:oninput![需要配合propertychange,兼容 IE9 以下版本] 用法: JS: if(isIE) { document.getElementById("input").onpropertychange

实时监听输入框值变化:oninput &amp; onpropertychange

在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快捷键也很麻烦.因此这篇文章向大家介绍一种完美的解决方案:结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:pa

js/jquery 实时监听输入框值变化的完美方案:oninput &amp; onpropertychange

本文转载于 http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/ Jquery绑定事件(bind和live的区别) js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange 2013-05-15 11:01:12|  分类: jquery/javascrip |

实时监听输入框

平时WEB开发中经常会碰到需要动态监听输入框值变化的情况: 首先想到:onchange.onkeydown.onkeypress.onkeyup: 不过: onchange:在元素失去焦点时触发(支持<select>): onkeydown.onkeypress.onkeyup:可以监听输入变化,监听不了右键的复制.剪贴和粘贴这些操作: 所以使用: oninput 和 onpropertychange oninput:(支持<input type="password"