在TextBox里面仅仅允许数字，按Enter键进入下一个TextBox

最新推荐文章于 2018-09-04 10:49:32 发布

weixin_33924312

最新推荐文章于 2018-09-04 10:49:32 发布

阅读量142

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/songxia/p/4367948.html

版权

本文介绍了一种使用JavaScript实现的方法，该方法允许文本框只接受数字输入（0-9）。通过监听键盘事件并检查按键码来确保只有数字字符可以被输入。此外，还实现了当按下Enter键时焦点自动跳转到下一个文本框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <style type="text/css">
        body {
            font-size: 9pt;
            font-family: Arial;
        }
    </style>
    <script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        function IsNumeric(e) {
            var keyCode = e.which ? e.which : e.keyCode
            var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
            document.getElementById("error").style.display = ret ? "none" : "inline";
            return ret;

        }



        $(document).ready(function () {

            // Setting focus on first textbox

            $('input:text:first').focus();

            // binding keydown event to textbox

            $('input:text').bind('keydown', function (e) {

                // detecting keycode returned from keydown and comparing if its equal to 13 (enter key code)

                if (e.keyCode == 13) {

                    // by default if you hit enter key while on textbox so below code will prevent that default behaviour

                    e.preventDefault();

                    // getting next index by getting current index and incrementing it by 1 to go to next textbox

                    var nextIndex = $('input:text').index(this) + 1;

                    // getting total number of textboxes on the page to detect how far we need to go

                    var maxIndex = $('input:text').length;

                    // check to see if next index is still smaller then max index

                    if (nextIndex < maxIndex) {

                        // setting index to next textbox using CSS3 selector of nth child

                        $('input:text:eq(' + nextIndex + ')').focus();

                    }
                }

            });

        });
    </script>

</head>

<body>
    Numeric Value:
    <input type="text" id="text1" οnkeypress="return IsNumeric(event);" οndrοp="return false;" οnpaste="return false;" />
    <input type="text" id="text2" οnkeypress="return IsNumeric(event);" οndrοp="return false;" οnpaste="return false;" />
    <input type="text" id="text3" οnkeypress="return IsNumeric(event);" οndrοp="return false;" οnpaste="return false;" />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9)</span>
</body>

</html>