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();

  • 相关阅读:
    填空:类型转换1
    :其他基本数据类型存储空间大小
    10:Hello, World!的大小
    09:整型与布尔型的转换
    08:打印字符
    07:打印ASCII码
    06:浮点数向零舍入
    05:填空:类型转换2
    04:填空:类型转换1
    03:其他基本数据类型存储空间大小
  • 原文地址:https://www.cnblogs.com/samtrybest/p/5071234.html
Copyright © 2011-2022 走看看