限制HTML中文本字段的输入而不刷新

Restricting the input of a text Filed in HTML without refreshing

本文关键字：输入 刷新 字段 HTML 中文 文本 限制      更新时间：2023-09-26

我正在使用一个表单

<form action="" method="post">
<p>Enter Roll Number:
<input type="text" name="roll" maxlength="6" placeholder="123456" size="7"/>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>

获取用户输入(卷号)我想要的是，在按键事件，用户只能在0-9和删除和退格和TAB键之间键入。所有其他键必须限制输入。还有一点，如果字段是空的，那么表单就不应该被发布

假设您将使用jQuery，因为它可能是实现这种事情的最简单的语法。

<script>
    $(document).ready(function() {
        $('input[name="roll"]').keypress(function(e) {
            // Check out which keys are pressed
            switch(e.keyCode) {
                case 8: //backspace
                case 9: // TAB
                case 46: // delete
                case 48: // 0
                case 49: // 1
                case 50: // 2
                case 51: // 3
                case 52: // 4
                case 53: // 5
                case 54: // 6
                case 55: // 7
                case 56: // 8
                case 57: // 9
                case 96: // numberpad = 0
                case 97: // numberpad = 1
                case 98: // numberpad = 2
                case 99: // numberpad = 3
                case 100: // numberpad = 4
                case 101: // numberpad = 5
                case 102: // numberpad = 6
                case 103: // numberpad = 7
                case 104: // numberpad = 8
                case 105: // numberpad = 9
                    break;
                default:
                    return false;
            }
        });
    });
</script>

下面是工作示例

这里是你的按键和表单提交的JS代码

<script>
    $(document).ready(function() {
        $('input[name="roll"]').keypress(function(e) {
            // Check out which keys are pressed
            if(e.keyCode == 8 || e.keyCode == 8 || e.keyCode == 46 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
                   return true;
            } else {
                   return false;
            }
        });
    });
    function checkvalid() {
        if($('#roll').val() != '') {
           $('#frmid').submit();
        } else {
           return false;
        }
    }
</script>

这里的HTML代码

<form action="" method="post" id="frmid" name="frmid" onsubmit="checkvalid();">
<p>Enter Roll Number:
<input type="text" name="roll" id="roll" maxlength="6" placeholder="123456" size="7"/>
</p>
<p>
<input type="submit" value="Submit" id="submit_btn" />
</p>
</form>
相关文章：