Question

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

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

Answer 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。

Answer 2

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

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

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


}

仅允许数字输入文本框

3 个答案: