堆棧內存溢出
  簡體   English   中英

將文本字段限制為僅數字的最佳方法？

[英]Best way to restrict a text field to numbers only?

 原文  2010-09-21 21:57:19  4   29    javascript/ html/ textbox/ numbers/ textfield

問題描述

我正在使用以下 Javascript 來限制我網站上的文本字段只接受數字輸入，而不接受其他字母或字符。 問題是，它真的拒絕所有其他鍵輸入，例如ctrl - A選擇文本，甚至任何其他瀏覽器功能，例如ctrl - T或ctrl - W在選擇文本框時。 有誰知道更好的腳本只允許數字輸入，但不阻止正常命令（不是直接輸入到字段中）？ 謝謝這是我現在使用的代碼：

function numbersonly(e, decimal) 
{
    var key;
    var keychar;

    if (window.event) 
        key = window.event.keyCode;
    else if (e) 
        key = e.which;
    else 
        return true;

    keychar = String.fromCharCode(key);

    if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27))
       return true;     
    else if ((("0123456789").indexOf(keychar) > -1))
       return true;
    else if (decimal && (keychar == "."))
       return true;        
    else
       return false;
}

編輯：提供的解決方案都沒有解決我在選擇文本框時允許像ctrl - A這樣的命令的問題。 這就是我在這里提問的全部意義，所以我又回到了使用我原來的腳本。 哦，好吧。

29 個解決方案

解決方案1
 36  2010-09-21 22:00:28

這是我再次為數字所做的事情，它也將允許所有格式化程序。

jQuery

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});​

試試看

http://jsfiddle.net/zpg8k/

請注意，為了粘貼/上下文菜單和不支持粘貼事件的瀏覽器，您還需要在提交/服務器端進行過濾。

編輯以詳細說明多種方法

我看到你在“接受”的答案周圍蹦蹦跳跳，所以我會澄清一些事情。 你真的可以使用這里列出的任何方法，它們都有效。 我個人會做的是使用我的實時客戶端過濾，然后在提交和服務器端按照其他人的建議使用 RegEx。 但是，沒有任何客戶端本身會是 100% 有效的，因為沒有什么能阻止我放置document.getElementById('theInput').value = 'Hey, letters.'; 在控制台中並繞過任何客戶端驗證（輪詢除外，但我也可以從控制台取消setInterval ）。 使用您喜歡的任何客戶端解決方案，但請確保您也在提交和服務器端實現了一些東西。

編輯 2 - @Tim Down

好吧，根據評論我不得不調整兩件我沒有想到的事情。 首先，keypress 而不是 keydown，它已經更新，但是 IE 中缺少 indexOf（認真的微軟！？）也打破了上面的例子。 這是一個替代方案

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!($.inArray(k,a)>=0))
        e.preventDefault();
});​

新的 jsfiddle： http : //jsfiddle.net/umNuB/

解決方案2
 20  2014-03-12 13:40:16

這適用於 IE、Chrome 和 Firefox：

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />

解決方案3
 17  2011-04-15 09:02:39

     .keypress(function(e)
               {
                 var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];

                 if (!($.inArray(e.which, key_codes) >= 0)) {
                   e.preventDefault();
                 }
               });

您也需要退格鍵和刪除鍵；)

解決方案4
 12  2010-09-21 22:23:26

http://jsfiddle.net/PgHFp/

<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
            ob.value = ob.value.replace(invalidChars,"");
      }
}
</script>
</head>

<body>
    <input type="text" onkeyup="checkInput(this)"/>
</body>
</html>

解決方案5
 5  2013-01-21 11:40:28

我用這個：

    oEl.keypress(function(ev)
    {
        var sKey = String.fromCharCode(ev.which);
        if (!sKey.match(/[0-9]/) || !sKey === "") 
            ev.preventDefault();            
    });

優點是，仍然允許每個不提供字段輸入的鍵，因此您不必擔心每個特殊鍵。 即使像 CTRL + R 這樣的組合仍然有效。

編輯因為這在 Firefox 中不起作用，所以我不得不稍微修改一下函數：

    oEl.keypress(function(ev)
    {
        var iKeyCode = ev.which || ev.keyCode;
        var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
        var sKey = String.fromCharCode(iKeyCode);
        if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
            ev.preventDefault();
        }
    });

說明所有瀏覽器都以不同的方式處理 jquery 按鍵事件。 為了使其在 FF 中工作，添加了 $.inArray 檢查。 由於使用 strg+tab 等組合時，firefoxs keypress-event 不會觸發，但其他組合會觸發，因此 key.match 方法仍然為后者增加了一點價值，因為它啟用了這些組合。

解決方案6
 5  2010-09-21 22:16:08

每當按下鍵或文本框失去焦點時，只需使用正則表達式即可擺脫任何非數字字符。

var numInput;
window.onload = function () {   
    numInput = document.getElementById('numonly');
    numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
    {
        numInput.value = numInput.value.replace(/[^0-9]+/,"");
    }
}

解決方案7
 5  2010-09-21 23:58:42

唯一包含輸入字符信息的事件是keypress 。 您可以從keydown或keyup事件的keyCode屬性推斷出的任何與字符相關的內容都是不可靠的，並且依賴於特定的鍵盤映射。 以下將通過使用從keypress事件獲得的字符來防止所有主要瀏覽器的非數字鍵盤輸入。 它不會阻止用戶粘貼或拖動非數字文本。

var input = document.getElementById("your_input");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
        var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
        if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
            return false;
        }
    }
};

解決方案8
 4  2012-10-12 17:44:28

也許您正在使用引導程序。 如果是這樣，這可能就足夠了：

<input type="text" data-mask="9999999">

輸入掩碼

解決方案9
 3  2013-11-15 01:44:28

添加<script type="text/javascript" src="jquery.numeric.js"></script>然后使用

 $("element").numeric({ decimal: false, negative: false });

解決方案10
 3  2010-10-07 03:46:54

以下代碼是我廣泛使用的代碼。 我在論壇中找到了該腳本，但對其進行了修改和擴展以滿足我的需求：

<script type="text/javascript">
    // Restrict user input in a text field
    // create as many regular expressions here as you need:
    var digitsOnly = /[1234567890]/g;
    var integerOnly = /[0-9\.]/g;
    var alphaOnly = /[A-Za-z]/g;
    var usernameOnly = /[0-9A-Za-z\._-]/g;

    function restrictInput(myfield, e, restrictionType, checkdot){
        if (!e) var e = window.event
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        var character = String.fromCharCode(code);

        // if user pressed esc... remove focus from field...
        if (code==27) { this.blur(); return false; }

        // ignore if the user presses other keys
        // strange because code: 39 is the down key AND ' key...
        // and DEL also equals .
        if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
            if (character.match(restrictionType)) {
                if(checkdot == "checkdot"){
                    return !isNaN(myfield.value.toString() + character);
                } else {
                    return true;
                }
            } else {
                return false;
            }
        }
    }
</script>

不同的使用方法是：

<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">

解決方案11
 2  2014-04-04 08:54:49

更短的方式，易於理解：

$('#someID').keypress(function(e) { 
    var k = e.which;
    if (k <= 48 || k >= 58) {e.preventDefault()};
});

解決方案12
 2  2014-10-31 04:37:31

這是羅伯特答案的變體，允許輸入一個小數點。 如果已經輸入了小數點，則只接受數字作為輸入。

JSFiddle - 十進制數字輸入

// Allow only decimal number input

$('#decimalInput').keypress(function (e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
    a.push(i);

    // allow a max of 1 decimal point to be entered
    if (this.value.indexOf(".") === -1) {
        a.push(46);
    }

    if (!(a.indexOf(k) >= 0)) e.preventDefault();

    $('span').text('KeyCode: ' + k);
});

解決方案13
 2  2017-08-03 12:53:38

我知道已經有很多答案，但為了簡單起見，我想添加另一個簡單且不言自明的答案，我們不必記住鍵碼，並且它也適用於所有瀏覽器。 

 document.getElementById('myinput').onkeydown = function(e) { console.log(e.key); //console.log(e.target.value); switch (e.key) { case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": case "0": case "Backspace": return true; break; case ".": if (e.target.value.indexOf(".") == -1) { return true; } else { return false; } break; default: return false; } }
 <input type="text" placeholder="Enter Value" id="myinput" />

解決方案14
 1  2012-09-24 07:23:24

這也將啟用小鍵盤輸入。

.keydown(function(event){                                     
    if(event.keyCode == 8 || event.keyCode == 46)             
        return true;                                         
    if(event.keyCode >= 96 && event.keyCode <= 105)           
        return true;                                          
    if(isNaN(parseInt(String.fromCharCode(event.keyCode),10)))
       return false;                                          
});

解決方案15
 1  2013-06-04 08:17:22

為了阻止除數字之外的任何內容輸入文本字段，但仍允許其他按鈕工作（例如刪除、移位、制表符等），請查看Javascript 鍵代碼的參考； 從 65 到 222 的任何內容都可以被阻止。

使用 Jquery 和 Javascript，看起來像：

$('#textFieldId').keydown(function(event) {
    if ( event.keyCode > 64 ) {
        event.preventDefault();
    }
});

無論是否使用 Jquery，關鍵代碼在 Javascript 中都是相同的。

解決方案16
 1  2013-12-13 08:10:25

這是我的解決方案：以下工作的組合。

var checkInput = function(e) {
        if (!e) {
            e = window.event;
        }

        var code = e.keyCode || e.which;

        if (!e.ctrlKey) {

            //46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
            if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
                return true;
            //35..39 - home, end, left, right
            if (code >= 35 && code <= 39)
                return true;
            //numpad numbers
            if (code >= 96 && code <= 105)
                return true;
            //keyboard numbers
            if (isNaN(parseInt(String.fromCharCode(code), 10))) {
                e.preventDefault();
                return false;
            }
        }
        return true;
    };

解決方案17
 1  2014-12-30 17:35:32

我在試圖自己解決這個問題時遇到了你的問題。 這是我想出的解決方案。

// Prevent user from entering non-numeric characters in number boxes.
(function (inputs) {
    var input;
    var f = function (e) {
        var unicodeRe = /U\+(\d+)/;
        // Chrome doesn't support the standard key property, so use keyIdentifier instead.
        // Instead of the actual character that "key" returns, keyIdentifier returns
        // A string such as "U+004F" representing the unicode character.

        // For special characters (e.g., "Shift", a string containing the name of the key is returned.)
        var ch = e.key || e.keyIdentifier;
        var match = ch.match(unicodeRe);
        // keyIdentifier returns a unicode. Convert to string.
        if (match) {
            ch = String.fromCharCode(Number.parseInt(match[1], 16));
        }
        console.log(ch);
        if (ch.length === 1 && /[^0-9]/.test(ch)) {
            if (!/[\b]/.test(ch)) { // Don't prevent backspace.
                e.preventDefault();
            }
        }
    };
    for (var i = 0, l = inputs.length; i < l; i += 1) {
        input = inputs[i];
        input.onkeydown = f;
    }
}(document.querySelectorAll("input[type=number],#routeFilterBox")));

編輯：我發現我的解決方案不允許用戶通過 Chrome 中的數字鍵盤輸入數字。 0-9 鍵盤鍵似乎為 0 返回字符“`”，為其余數字鍵返回 AI。

解決方案18
 1  2010-09-23 08:45:41

值得指出的是，無論您設法通過前端（Javascript、HTML 等）多么嚴格地控制它，您仍然需要在服務器上對其進行驗證，因為沒有什么可以阻止用戶關閉 javascript，甚至故意向您的表單發布垃圾內容以試圖破解您。

我的建議：使用 HTML5 標記，以便支持它的瀏覽器使用它。 還可以使用之前建議的 JQuery 選項（初始解決方案可能有缺陷，但似乎評論已經解決了這個問題）。 然后也進行服務器端驗證。

解決方案19
 1  2019-06-13 03:02:04

所有的答案都是過時的、冗長的，並且會給您的用戶帶來煩惱。 他們中的大多數甚至不過濾或允許粘貼的內容。

不要過濾輸入，而是在提交表單之前進行一些驗證，然后在服務器端進行驗證。

HTML 的驗證包括：

<input type="number" pattern="[0-9]+">

這也啟用了移動設備上的數字鍵盤。

解決方案20
 0  2013-04-24 10:52:54

這是我用於這種情況的插件：

 (function( $ ) {
    $.fn.numbers = function(options) {
      $(this).keypress(function(evt){
          var setting = $.extend( {
                'digits' : 8
              }, options);
          if($(this).val().length > (setting.digits - 1) && evt.which != 8){
              evt.preventDefault(); 
          }
          else{
              if(evt.which < 48 || evt.which > 57){
                if(evt.keyCode != 8){
                    evt.preventDefault();  
                }
              }
          }
      });
    };
  })( jQuery );

使用：

 $('#limin').numbers({digits:3});
 $('#limax').numbers();

解決方案21
 0  2013-08-15 22:15:31

有我當前的數字輸入解決方案，需要在不同的瀏覽器中進行測試，但似乎有效

支持逗號和句點分隔符（捷克本地為逗號）、空格和小鍵盤/鍵盤數字輸入。 允許 Ctrl+C Ctrl+A 或 Ctrl+X，箭頭導航和刪除塊 Ctrl+V。 通過模糊輸入對轉義鍵做出反應。

觀看我的咖啡腳本：

(($) ->
  $.fn.onlyNumbers = ->
    @each ->
      $(@).keydown (e) ->
        # get code of key
        code = if e.keyCode then e.keyCode else e.which

        return $(@).blur() if code is 27 # blur on escape
        return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
        return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x]
        return if code in [96..105] # numpad numbers
        return if code in [48..57] # numbers on keyboard
        return if code in [35..39] # 35..39 - home, end, left, right
        return if code in [188, 190, 32] # comma, period, space
        return if code in [44] # comma, period,

        e.returnValue = false # IE hate you
        e.preventDefault();

      $(@).keypress (e) ->
        code = if e.keyCode then e.keyCode else e.which
        return if code in [44, 46, 32] # comma, period, space
        return if code in [48..57] # numbers on keyboard
        e.returnValue = false # IE hate you
        e.preventDefault();

) jQuery

你可以在這里獲得編譯好的 Javascript http://goo.gl/SbyhXN

解決方案22
 0  2013-10-29 09:44:28

我的功能：

$('.input_integer_only').on('input', function(e) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});


$('.input_float_only').on('input', function(e) {
    var $var = $(this).val().replace(/[^0-9\.]/g, '');
    var $aVar = $var.split('.');

    if($aVar.length > 2) {
        $var = $aVar[0] + '.' + $aVar[1];
    }

    $(this).val($var);
});

解決方案23
 0  2014-01-28 19:17:23

您可以進行更改以接受 Ctrl 鍵的鍵碼：17、18、19、20。然后您的代碼將如下所示：

function numbersonly(e, decimal) {
var key;
var keychar;

if (window.event) 
    key = window.event.keyCode;
else if (e) 
    key = e.which;
else 
    return true;

keychar = String.fromCharCode(key);

if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27) || (key==17) || (key==18) || (key==19) || (key==20))
   return true;     
else if ((("0123456789").indexOf(keychar) > -1))
   return true;
else if (decimal && (keychar == "."))
   return true;        
else
   return false;
}

解決方案24
 0  2016-09-26 23:41:02

  document.getElementById('myinput').onkeydown = function(e) {
      if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8
      || e.keyCode == 9)) {
        return false;
      }
  }

解決方案25
 0  2016-12-02 13:11:01

您可以這樣做以僅接受文本框中的數字，

 function onChange(event){
   var ckeckChars = /[^0-9]/gi;
   if(checkChars.test(event.target.value)) {
        event.target.value = event.target.value.replace(ckeckChars,"");
  }

解決方案26
 0  2019-04-09 09:54:55

此 JavaScript 函數將用於限制 Textbox 中的字母和特殊字符，只允許使用數字、刪除、箭頭鍵和退格鍵。 JavaScript 代碼片段 -允許文本框中的數字，限制字母和特殊字符

在 IE 和 Chrome 中測試。

JavaScript 函數

<script type="text/javascript">
    /*code: 48-57 Numbers
      8  - Backspace,
      35 - home key, 36 - End key
      37-40: Arrow keys, 46 - Delete key*/
    function restrictAlphabets(e){
        var x=e.which||e.keycode;
        if((x>=48 && x<=57) || x==8 ||
            (x>=35 && x<=40)|| x==46)
            return true;
        else
            return false;
    }
</script>

帶有 JavaScript 的 HTML 源代碼

<html>
    <head>
        <title>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</title>
        <script type="text/javascript">
            /*code: 48-57 Numbers
              8  - Backspace,
              35 - home key, 36 - End key
              37-40: Arrow keys, 46 - Delete key*/
            function restrictAlphabets(e){
                var x=e.which||e.keycode;
                if((x>=48 && x<=57) || x==8 ||
                    (x>=35 && x<=40)|| x==46)
                    return true;
                else
                    return false;
            }
        </script>
    </head>
<body style="text-align: center;">
    <h1>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</h1>
    <big>Enter numbers only: </big>
    <input type="text" onkeypress='return restrictAlphabets(event)'/>
</body>

</html>

參考

解決方案27
 0  2019-12-31 19:43:09

我在 Angular 下面使用來限制字符

在 HTML 中

僅限號碼

<input
 type="text"
 id="score"
 (keypress) ="onInputChange($event,'[0-9]')"
 maxlength="3"
 class="form-control">

僅適用於字母

<input
     type="text"
     id="state"
     (keypress) ="onInputChange($event,'[a-zA-Z]')"
     maxlength="3"
     class="form-control">

在打字稿中

 onInputChange(event: any, inpPattern:string): void {   
        var input = event.key; 
        if(input.match(inpPattern)==null){
         event.preventDefault();
        }
      }

解決方案28
 -1  2014-12-29 17:33:56

您可以通過引入 keypresshandler 函數來處理 html 上的 te 事件

function keypresshandler(event)
{
     var charCode = event.keyCode;

     //You condition
     if (charCode == 58 ){

        event.preventDefault();

        return false;
     }        
}

解決方案29
 -1  2017-11-30 15:55:51

Javascript 通常用於瀏覽器客戶端來執行簡單的任務，否則這些任務將需要完整的回發到服務器。 許多這些簡單的任務涉及處理輸入到網頁表單元素中的文本或字符，並且通常需要知道與字符關聯的 javascript 鍵碼。 這是一個參考。

在下面的文本框中按一個鍵以查看相應的 Javascript 鍵代碼。 

 function restrictCharacters(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (((charCode >= '48') && (charCode <= '57')) || (charCode == '44')) { return true; } else { return false; } }
 Enter Text: <input type="text" id="number" onkeypress="return restrictCharacters(event);" />

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript將文本字段限制為數字和小數？ 如何限制文本字段僅輸入數字 如何在輸入=“文本”中限制十進制數字僅顯示整數 只有數字的文本字段 - React 如何限制數字字段只能在oracle apex中輸入數字 Javascript / Jquery將輸入字段限制為一個小數和數字 在HTML5輸入字段的文本前面添加鍵入數字的最佳方法？ 從文本中提取數字的最佳方法是什么 僅允許文本字段中的特定數字 表單文本字段僅接受數字和空格
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM