Question

如何使HTML输入标记仅接受数字？

我需要确保input字段仅将数字作为输入值。
我希望用户无法输入其他任何字符比数字。
用户手动输入数字而不是数字滚动条。

我正在使用Meteor Js。代码如下所示。

App.html

<head>
  <title App</title>
</head>

<body>
  {{> main}}

</body>

<template name="main">
     <h1>Welcome to TICTACTOE App</h1>
    <p><b>Layout Number :</b> <input type="text" id="no"></p>
</template>



App.js


if (Meteor.isClient)
 {


  Template.main.events
  ({
    'keydown input#no' : function ()
    {
      // template data, if any, is available in 'this'
      if (event.which == 13) 
        { // 13 is the enter key event
          console.log("You pressed  enter key");
        }
    }
  });
}

if (Meteor.isServer) 
{
  Meteor.startup(function () 
  {
    // code to run on server at startup
  });
}

Answer 1

这应该对你有帮助。

<input type="number" />

：）

或者将jQuery与密钥代码一起使用的最佳方式：

jQuery("#yourInputId").keydown(function(event) {
            // Allow: backspace, delete, tab, escape, enter and .
            if ( jQuery.inArray(event.keyCode,[46,8,9,27,13,190]) !== -1 ||
                 // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) || 
                 // Allow: home, end, left, right
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                     // let it happen, don't do anything
                     return;
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                    event.preventDefault(); 
                }   
            }
        });

请参阅DEMO.

Answer 2

如果您使用HTML5，那么

<input type="number" />

否则

<script>
     function isNumberKey(evt){
            var charCode = (evt.which) ? evt.which : event.keyCode
            return !(charCode > 31 && (charCode < 48 || charCode > 57));
        }
</script>

<input type="text" onkeypress="return isNumberKey(event);">

Answer 3

使用HTML5很容易：

<input type="number" />

如果不支持HTML5，请使用jQuery事件：Live Demo

<label for="number">Number: </label>
<input type="text" name="number" id="number" />

<script>
    $('#number').keydown(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
        $(this).keyup(function(){
            $(this).val($(this).val().replace(/[^\d]/,''));
        });
    });
</script>

Answer 4

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>

Answer 5

仅适用于HTML 5。如果你想让它适用于旧浏览器，你必须得到javascript的帮助。

Answer 6

试试这个

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

您还可以在html5中使用pattern属性：

<input type="text" name="name" pattern="[0-9]" title="Title" />

Answer 7

在您需要过滤的任何输入上，您只需要输入 onkeydown =“return onlynumbers（event）;” 码。这是一个通用代码，可以在旧HTML上运行，不需要jQuery。：）

<script type="text/javascript"> 
function onlynumbers(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
</script>
<input type="text" onkeydown="return onlynumbers(event);">

如何使HTML输入标签只接受数字？

7 个答案: