只允许在输入文本框中输入数字答案

【问题标题】：Allow only numbers into a input text box只允许在输入文本框中输入数字
【发布时间】：2014-04-13 05:14:49
【问题描述】：

我有一个数字输入文本框，我想允许用户编辑但不想让用户输入除数字以外的任何其他文本。我希望他们只能使用数字输入框上的箭头。

 <input type = "number" min="0" max="10" step="0.5"  input id="rating"   name = "rating" class = "login-input" placeholder = "Rating 1-5:" value="0">

【问题讨论】：

标签： html input textbox numbers

【解决方案1】：

您可以通过纯JavaScript 来实现这一点。创建可以在脚本中重复使用的函数。

function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
}

您最好调用此onkeypress 事件处理程序。

<input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)" />

function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    Try editing in me:
    <input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)" />
</body>
</html>

但是，我建议使用不显眼的方式编写 JS，因为这样可以很好地保持 HTML 语义并远离污染。您可以在事件处理程序上执行我们将使用 vanilla JavaScript 或 jQuery 附加到此文本框的函数。

function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
}

// using classic addEventListener method:
document.getElementById('onlyNumbers').addEventListener('keypress', function(e){    allowNumbersOnly(e);
}, false);

//using jQuery
$(function(){
    $('#onlyNumbers2').keypress(function(e) {
       allowNumbersOnly(e); 
    });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <div>
      Using addEventListener: <input type="text" id="onlyNumbers" />
    </div>
    
    <div>
      Using jQuery: <input type="text" id="onlyNumbers2" />
    </div>
</body>
</html>

要限制每个字符，您只需使用e.preventDefault()。

此外，您也可以改用return false，但在这种情况下preventDefault() 更好，应该明智地选择return false。很高兴知道difference between both of them。

【讨论】：

这个时候我还以为 jquery 有一个库，但是由于可以传递各种可能的对象类型，它们太诡异了。这对我很有效

【解决方案2】：

document.getElementById('rating').onkeypress = function() { return false; }

这将阻止对该元素的默认按键行为，即显示文本。

【讨论】：

我将如何实现这个javascript？
没关系，这是一个愚蠢的问题。放置在
如何防止用户退格我的初始值？这只能防止字母和数字。
只需在您的页面上运行它，可能使用
这应该可以。 document.getElementById('rating').onfocus = function() { return this.blur(); }

【解决方案3】：

HTML

 <input type="text"  class="IntOnly">

Javascript

let ele = document.getElementsByClassName('IntOnly');

for (const e of ele) {
    //e.addEventListener('change', filterNonIntOut.bind(null, e));
    //e.addEventListener('paste', filterNonIntOut.bind(null, e));
    e.addEventListener('input', filterNonIntOut.bind(null, e));


}

function filterNonIntOut(theTextbox) {
    //console.log(ele);

    let startPos = theTextbox.selectionStart;
    let endPos = theTextbox.selectionEnd;

    let str = theTextbox.value;

    str = str.trim();
    if (str == '') {
        theTextbox.value = '';
        return;
    }

    let result = "";

    for (var i = 0; i < str.length; i++) {

        let ch = str.charAt(i);
        //console.log(ch);
        if (ch === '1'
            || ch === '2'
            || ch === '3'
            || ch === '4'
            || ch === '5'
            || ch === '6'
            || ch === '7'
            || ch === '8'
            || ch === '9'
            || ch === '0'
        ) {
            result += ch;
            
        }
        else {
            startPos -= 1;
            endPos -= 1;
        }
    }
    theTextbox.value = result;
    theTextbox.focus();

    theTextbox.setSelectionRange(startPos, endPos);
    


}

【讨论】：