Tôi đang tạo một trang web nơi tôi có trường văn bản đầu vào, trong đó tôi muốn chỉ cho phép các ký tự số như (0,1,2,3,4,5 ... 9) 0-9.

Làm thế nào tôi có thể làm điều này bằng cách sử dụng jQuery?

^{Lưu ý: Đây là một câu trả lời cập nhật. Nhận xét bên dưới đề cập đến một phiên bản cũ gây rối với mã phím.}

jQuery

Hãy thử nó trên JSFiddle .

Không có triển khai jQuery gốc cho việc này, nhưng bạn có thể lọc các giá trị đầu vào của văn bản <input>bằng inputFilterplugin sau (hỗ trợ Sao chép + Dán, Kéo + Thả, phím tắt, thao tác menu ngữ cảnh, phím không gõ, vị trí dấu mũ, khác nhau bố trí bàn phím và tất cả các trình duyệt kể từ IE 9 ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

Bây giờ bạn có thể sử dụng inputFilterplugin để cài đặt bộ lọc đầu vào:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

Xem bản demo của JSFiddle để biết thêm các ví dụ về bộ lọc đầu vào. Cũng lưu ý rằng bạn vẫn phải xác nhận phía máy chủ!

JavaScript thuần túy (không có jQuery)

jQuery thực sự không cần thiết cho việc này, bạn cũng có thể làm điều tương tự với JavaScript thuần túy. Xem câu trả lời này .

HTML 5

HTML 5 có một giải pháp riêng với <input type="number">(xem thông số kỹ thuật ), nhưng lưu ý rằng hỗ trợ trình duyệt khác nhau:

• Hầu hết các trình duyệt sẽ chỉ xác nhận đầu vào khi gửi biểu mẫu chứ không phải khi nhập.
• Hầu hết các trình duyệt di động không hỗ trợ step, minvà maxcác thuộc tính.
• Chrome (phiên bản 71.0.3578.98) vẫn cho phép người dùng nhập các ký tự evà Evào trường. Cũng xem câu hỏi này .
• Firefox (phiên bản 64.0) và Edge (EdgeHTML phiên bản 17.17134) vẫn cho phép người dùng nhập bất kỳ văn bản nào vào trường.

Hãy thử nó trên w3schools.com .

Đây là chức năng tôi sử dụng:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Sau đó, bạn có thể gắn nó vào điều khiển của mình bằng cách thực hiện:

$("#yourTextBoxName").ForceNumericOnly();

Nội tuyến:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Phong cách không phô trương (với jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

Bạn chỉ có thể sử dụng một biểu thức chính quy JavaScript đơn giản để kiểm tra các ký tự số hoàn toàn:

/^[0-9]+$/.test(input);

Điều này trả về true nếu đầu vào là số hoặc sai nếu không.

hoặc cho mã khóa sự kiện, sử dụng đơn giản dưới đây:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

Bạn có thể sử dụng cho sự kiện đầu vào như thế này:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Nhưng, đặc quyền mã này là gì?

• Nó hoạt động trên các trình duyệt di động (keydown và keyCode có vấn đề).
• Nó cũng hoạt động trên nội dung được tạo bởi AJAX, bởi vì chúng tôi đang sử dụng "bật".
• Hiệu suất tốt hơn so với keydown, ví dụ như trên sự kiện dán.

Ngắn gọn và ngọt ngào - ngay cả khi điều này sẽ không bao giờ tìm thấy nhiều sự chú ý sau hơn 30 câu trả lời;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

Sử dụng chức năng JavaScript làNaN ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getEuityById ('inputid'). val ()))

if (isNaN(document.getElementById('inputid').value))

Cập nhật: Và đây là một bài viết hay nói về nó nhưng sử dụng jQuery: Hạn chế nhập liệu trong các hộp văn bản HTML thành các giá trị số

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Nguồn: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Tôi sử dụng điều này trong tập tin js chung nội bộ của chúng tôi. Tôi chỉ thêm lớp vào bất kỳ đầu vào nào cần hành vi này.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

Đơn giản hơn đối với tôi là

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});

Sao lại phức tạp thế? Bạn thậm chí không cần jQuery vì có thuộc tính mẫu HTML5:

<input type="text" pattern="[0-9]*">

Điều thú vị là nó mang đến một bàn phím số trên thiết bị di động, cách này tốt hơn so với sử dụng jQuery.

Bạn có thể làm tương tự bằng cách sử dụng giải pháp rất đơn giản này

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Tôi đã đề cập đến liên kết này cho giải pháp. Nó hoạt động hoàn hảo !!!

Bạn có thể thử đầu vào số HTML5 :

<input type="number" value="0" min="0"> 

Đối với các trình duyệt không tuân thủ, có các dự phòng Modernizr và Webforms2 .

Thuộc tính mẫu trong HTML5 chỉ định biểu thức chính quy mà giá trị của phần tử được kiểm tra.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Lưu ý: Thuộc tính mẫu hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, tel, email và mật khẩu.

• [0-9] có thể được thay thế bằng bất kỳ điều kiện biểu thức chính quy nào.

• {1,3} nó đại diện cho tối thiểu 1 và có thể nhập tối đa 3 chữ số.

Một cái gì đó khá đơn giản khi sử dụng jQuery.validate

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');

chức năng đàn ápNonNumericInput (sự kiện) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}

Tôi đã đi đến một giải pháp rất tốt và đơn giản mà không ngăn người dùng chọn văn bản hoặc sao chép dán như các giải pháp khác làm. Phong cách jQuery :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server

Bạn có thể sử dụng chức năng JavaScript này:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

Và bạn có thể liên kết nó với hộp văn bản của bạn như thế này:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

Tôi sử dụng ở trên trong sản xuất, và nó hoạt động hoàn hảo, và nó là trình duyệt chéo. Hơn nữa, nó không phụ thuộc vào jQuery, vì vậy bạn có thể liên kết nó với hộp văn bản của mình bằng JavaScript nội tuyến:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

Tôi nghĩ nó sẽ giúp được tất cả mọi người

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

Tôi đã viết của tôi dựa trên bài đăng của @ user261922 ở trên, được sửa đổi một chút để bạn có thể chọn tất cả, tab và có thể xử lý nhiều trường "chỉ số" trên cùng một trang.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

Đây là một giải pháp nhanh chóng mà tôi đã tạo ra một thời gian trước đây. bạn có thể đọc thêm về nó trong bài viết của tôi:

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});

Bạn sẽ muốn cho phép tab:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

Đây là một câu trả lời sử dụng nhà máy jQuery UI Widget. Bạn có thể tùy chỉnh những ký tự được cho phép dễ dàng.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Điều đó sẽ cho phép số, ký hiệu số và số tiền đô la.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});

Điều này dường như không thể phá vỡ.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

Cần đảm bảo rằng bạn có bàn phím số và phím tab cũng hoạt động

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

Tôi muốn giúp một chút, và tôi đã tạo phiên bản của mình, onlyNumberschức năng ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

Chỉ cần thêm vào thẻ đầu vào "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." và bạn đã hoàn tất;)

Tôi cũng muốn trả lời :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

Đó là ... chỉ là những con số. :) Hầu như nó có thể hoạt động chỉ với 'mờ', nhưng ...

Cách đơn giản để kiểm tra xem giá trị nhập là số là:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }

Chỉ cần áp dụng phương pháp này trong Jquery và bạn có thể xác thực hộp văn bản của mình để chỉ chấp nhận số.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Hãy thử giải pháp này tại đây

Bạn có thể thử đầu vào số HTML5:

<input type="number" placeholder="enter the number" min="0" max="9">

Phần tử thẻ đầu vào này bây giờ sẽ chỉ nhận giá trị trong khoảng từ 0 đến 9 vì thuộc tính min được đặt thành 0 và thuộc tính max được đặt thành 9.

để biết thêm thông tin về chuyến thăm http://www.w3schools.com/html/html_form_input_types.asp