zoukankan      html  css  js  c++  java
  • JS实现表单输入Enter键转换焦点框

    <form>
        <input type="text" onkeypress="return handleEnter(this, event)"><br>
        <input type="text" onkeypress="return handleEnter(this, event)"><br>
        <textarea onkeypress="return handleEnter(this, event)">回车切换焦点</textarea>
    </form>
        <script type="text/javascript">
        function handleEnter (field, event) {
            var keyCode = event.keyCode ? event.keyCode : event.which ?
            event.which : event.charCode;
            if (keyCode == 13) {
                var i;
                for (i = 0; i < field.form.elements.length; i++)
                    if (field == field.form.elements[i])
                    break;
                    i = (i + 1) % field.form.elements.length;
                    field.form.elements[i].focus();
                    return false;
            }
            else
            return true;
        }
    </script>

    jQuery版   相比存在一点缺陷   要求不严格的话可以用

    $(function () {
            $('input:text:first').focus();
            var $inp = $('input:text');
            $inp.bind('keydown', function (e) {
                var key = e.which;
                if (key == 13) {
                    e.preventDefault();
                    var nxtIdx = $inp.index(this) + 1;
                    $(":input:text:eq(" + nxtIdx + ")").focus();
                }
            });
        });

    分析:
    $('input:text:first').focus();
    页面初始化时,焦点定位第一个文本框内


    var $inp = $('input:text');  
    取的type=文本框的元素集合


    $inp.bind('keydown', function (e) {} 
    给文本框集合绑定'keydown'事件


    var key = e.which;       
    取的当前按下的键值 比如Enter的键值=13


    e.preventDefault();

  • 相关阅读:
    Clouds
    docs
    虚拟化监控问题
    Openstack Ceilometer监控项扩展
    openStack ceilometer API
    sql分级汇总
    【Android归纳】阿里笔试题之Android网络优化
    享元模式
    【Hibernate步步为营】--核心对象+持久对象全析(三)
    Linux经常使用命令(三)
  • 原文地址:https://www.cnblogs.com/samtrybest/p/5071234.html
Copyright © 2011-2022 走看看