Có cách nào nhanh chóng để đặt đầu vào văn bản HTML ( <input type=text />) chỉ cho phép tổ hợp phím số (cộng với '.') Không?

^{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.}

JavaScript

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

Bạn có thể lọc các giá trị đầu vào của văn bản <input>bằng setInputFilterchức năng 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ũ, bố cục bàn phím khác nhau và tất cả các trình duyệt kể từ IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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 = "";
      }
    });
  });
}

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

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' 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ủ!

TypeScript

Đây là một phiên bản TypeScript này.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Ngoài ra còn có một phiên bản jQuery nà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 .

Sử dụng DOM này

<input type='text' onkeypress='validate(event)' />

Và kịch bản này

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Tôi đã tìm kiếm rất lâu để có câu trả lời hay cho vấn đề này và chúng tôi rất cần <input type="number", nhưng ngắn gọn, đây là 2 cách ngắn gọn nhất mà tôi có thể nghĩ ra:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Nếu bạn không thích ký tự không được chấp nhận hiển thị trong một giây trước khi bị xóa, phương pháp dưới đây là giải pháp của tôi. Lưu ý nhiều điều kiện bổ sung, điều này là để tránh vô hiệu hóa tất cả các loại điều hướng và phím nóng. Nếu bất cứ ai biết làm thế nào để thu gọn điều này, hãy cho chúng tôi biết!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Đây là một đơn giản cho phép chính xác một thập phân, nhưng không hơn:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

Và một ví dụ nữa, hoạt động rất tốt cho tôi:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Đồng thời đính kèm với sự kiện nhấn phím

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Và HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Dưới đây là một ví dụ jsFiddle

HTML5 có <input type=number>, âm thanh phù hợp với bạn. Hiện tại, chỉ có Opera hỗ trợ nó một cách tự nhiên, nhưng có một dự án có triển khai JavaScript.

Hầu hết các câu trả lời ở đây đều có điểm yếu là sử dụng các sự kiện chính .

Nhiều câu trả lời sẽ hạn chế khả năng lựa chọn văn bản của bạn với macro bàn phím, sao chép + dán và nhiều hành vi không mong muốn khác, những câu trả lời khác dường như phụ thuộc vào các plugin jQuery cụ thể, đó là giết ruồi bằng súng máy.

Giải pháp đơn giản này dường như hoạt động tốt nhất đối với tôi đa nền tảng, bất kể cơ chế nhập liệu (tổ hợp phím, sao chép + dán, sao chép bên phải + dán, lời nói thành văn bản, v.v.). Tất cả các macro bàn phím chọn văn bản vẫn sẽ hoạt động và thậm chí nó sẽ giới hạn khả năng của một người để đặt giá trị không phải là số theo tập lệnh.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Tôi đã chọn sử dụng kết hợp hai câu trả lời được đề cập ở đây tức là

<input type="number" />

và

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

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

HTML5 hỗ trợ regexes, vì vậy bạn có thể sử dụng điều này:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Cảnh báo: Một số trình duyệt chưa hỗ trợ này.

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

thêm bạn có thể thêm dấu phẩy, dấu chấm và dấu trừ (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

Quá đơn giản....

// Trong một hàm JavaScript (có thể sử dụng HTML hoặc PHP).

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

Trong mẫu đầu vào của bạn:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Với đầu vào tối đa. (Những điều trên cho phép số 12 chữ số)

2 giải pháp:

Sử dụng trình xác thực mẫu (ví dụ với plugin xác thực jQuery )

Thực hiện kiểm tra trong sự kiện onblur (tức là khi người dùng rời khỏi trường) của trường đầu vào, với biểu thức chính quy:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Một cách tiếp cận an toàn hơn là kiểm tra giá trị của đầu vào, thay vì chiếm quyền điều khiển phím và cố gắng lọc các Mã khóa.

Bằng cách này, người dùng có thể tự do sử dụng mũi tên bàn phím, phím bổ trợ, xóa lùi, xóa, sử dụng bàn phím không chuẩn, sử dụng chuột để dán, sử dụng kéo và thả văn bản, thậm chí sử dụng đầu vào trợ năng.

Kịch bản dưới đây cho phép số dương và số âm

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: Tôi đã xóa câu trả lời cũ của tôi bởi vì tôi nghĩ rằng nó là cổ xưa.

Bạn có thể sử dụng mẫu cho việc này:

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

Tại đây bạn có thể xem các mẹo giao diện trang web di động hoàn chỉnh .

Vui lòng tìm giải pháp được đề cập dưới đây. Trong thành viên này có thể có thể chỉ nhập numericgiá trị, cũng dùng không thể có thể copy, paste, dragvà dropở đầu vào.

Nhân vật được phép

0,1,2,3,4,5,6,7,8,9

Không được phép Nhân vật và Nhân vật thông qua các sự kiện

• Giá trị chữ cái
• Nhân vật đặc biệt
• Sao chép
• Dán
• Kéo
• Rơi vãi

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Hãy cho tôi biết nếu nó không hoạt động.

Nếu bạn muốn đề xuất với thiết bị (có thể là điện thoại di động) giữa alpha hoặc số bạn có thể sử dụng <input type="number">.

Một ví dụ nữa trong đó bạn chỉ có thể thêm số trong trường nhập, không thể chữ

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Việc triển khai ngắn và ngọt ngào bằng cách sử dụng jQuery và thay thế () thay vì nhìn vào event.keyCode hoặc event.which:

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

Chỉ có tác dụng phụ nhỏ mà chữ được gõ xuất hiện trong giây lát và CTRL / CMD + A có vẻ hơi lạ.

input type="number" là một thuộc tính HTML5.

Trong trường hợp khác, điều này sẽ giúp bạn:

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

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

Mã JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

Mã HTML:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

hoạt động hoàn hảo vì mã khóa backspace là 8 và biểu thức regex không cho phép, vì vậy đây là cách dễ dàng để vượt qua lỗi :)

Một cách dễ dàng để giải quyết vấn đề này là triển khai một hàm jQuery để xác thực bằng regex, các ký tự được nhập vào hộp văn bản chẳng hạn:

Mã html của bạn:

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

Và hàm js sử dụng jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

Chỉ là một biến thể khác với jQuery bằng cách sử dụng

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

chỉ cần sử dụng type = "number" ngay bây giờ thuộc tính này hỗ trợ trong hầu hết các trình duyệt

<input type="number" maxlength="3" ng-bind="first">

Bạn cũng có thể so sánh giá trị đầu vào (được coi là chuỗi theo mặc định) với chính nó bị ép buộc dưới dạng số, như:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Tuy nhiên, bạn cần liên kết nó với sự kiện như keyup, v.v.

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

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

Tôi đã thấy một số câu trả lời tuyệt vời tuy nhiên tôi thích chúng nhỏ và đơn giản nhất có thể, vì vậy có lẽ ai đó sẽ được hưởng lợi từ nó. Tôi sẽ sử dụng javascript Number()và isNaNchức năng như thế này:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Hi vọng điêu nay co ich.

Sử dụng DOM này:

<input type = "text" onkeydown = "validate(event)"/>

Và kịch bản này:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... HOẶC tập lệnh này, không có indexOf, sử dụng hai for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Tôi đã sử dụng thuộc tính onkeydown thay vì onkeypress, vì thuộc tính onkeydown được kiểm tra trước thuộc tính onkeypress. Vấn đề sẽ nằm ở trình duyệt Google Chrome.

Với thuộc tính "onkeypress", TAB sẽ không thể kiểm soát được với "notifyDefault" trên google chrome, tuy nhiên, với thuộc tính "onkeydown", TAB trở nên có thể kiểm soát được!

Mã ASCII cho TAB => 9

Tập lệnh đầu tiên có ít mã hơn tập lệnh thứ hai, tuy nhiên, mảng các ký tự ASCII phải có tất cả các khóa.

Kịch bản thứ hai lớn hơn nhiều so với tập lệnh đầu tiên, nhưng mảng không cần tất cả các khóa. Chữ số đầu tiên trong mỗi vị trí của mảng là số lần mỗi vị trí sẽ được đọc. Đối với mỗi lần đọc, sẽ được tăng 1 đến lần tiếp theo. Ví dụ:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




Trong trường hợp các phím số chỉ là 10 (0 - 9), nhưng nếu chúng là 1 triệu thì sẽ không có ý nghĩa gì khi tạo một mảng với tất cả các phím này.

Mã ASCII:

• 8 ==> (Backspace);
• 46 => (Xóa);
• 37 => (mũi tên trái);
• 39 => (mũi tên phải);
• 48 - 57 => (số);
• 36 => (nhà);
• 35 => (kết thúc);

Đây là một chức năng được cải thiện:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Cách tốt nhất (cho phép TẤT CẢ các loại số - âm thực, dương thực, âm iinteger, dương nguyên) là:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Đây là phiên bản mở rộng của giải pháp geowa4 . Hỗ trợ minvà maxthuộc tính. Nếu số nằm ngoài phạm vi, giá trị trước đó sẽ được hiển thị.

Bạn có thể kiểm tra nó ở đây.

Sử dụng: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Nếu các đầu vào là động sử dụng này:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});