วิธีที่ดีที่สุดในการ จำกัด "ตัวเลข" คือใส่ข้อความในกล่องข้อความเท่านั้น?

ฉันกำลังมองหาบางอย่างที่อนุญาตให้มีจุดทศนิยม

ฉันเห็นตัวอย่างมากมาย แต่ยังไม่ได้ตัดสินใจว่าจะใช้อันไหน

อัพเดทจาก Praveen Jeganathan

ไม่มีปลั๊กอินอีกต่อไป jQuery ได้jQuery.isNumeric()เพิ่มตัวของมันเองใน v1.7 ดู: https://stackoverflow.com/a/20186188/66767

ปรับปรุง

มีทางออกใหม่และง่ายมากสำหรับสิ่งนี้:

อนุญาตให้คุณใช้ตัวกรองอินพุตชนิดใดก็ได้บนข้อความ<input>รวมถึงตัวกรองตัวเลขต่างๆ สิ่งนี้จะจัดการคัดลอก + วางลาก + วางแป้นพิมพ์ลัดการใช้งานเมนูบริบทปุ่มที่ไม่สามารถพิมพ์ได้และเค้าโครงแป้นพิมพ์ทั้งหมดอย่างถูกต้อง

ดูคำตอบนี้หรือลองด้วยตัวคุณเองใน JSFiddle

ปลั๊กอิน jquery.numeric

ฉันใช้งานหลายรูปแบบด้วยปลั๊กอินjquery.numeric สำเร็จแล้ว

$(document).ready(function(){
    $(".numeric").numeric();
});

นอกจากนี้ยังใช้งานได้กับ textareas ด้วย!

อย่างไรก็ตามโปรดทราบว่า Ctrl + A, คัดลอก + วาง (ผ่านเมนูบริบท) และลาก + วางจะไม่ทำงานตามที่คาดไว้

HTML 5

ด้วยการสนับสนุนที่กว้างขึ้นสำหรับมาตรฐาน HTML 5 เราสามารถใช้patternคุณลักษณะและnumberประเภทของinputองค์ประกอบเพื่อ จำกัด การป้อนข้อมูลเฉพาะตัวเลข ในบางเบราว์เซอร์ (โดยเฉพาะ Google Chrome) มันทำงานเพื่อ จำกัด การวางเนื้อหาที่ไม่ใช่ตัวเลขเช่นกัน ข้อมูลเพิ่มเติมเกี่ยวกับnumberประเภทและการป้อนข้อมูลใหม่อื่น ๆ ที่สามารถใช้ได้ที่นี่

หากคุณต้องการ จำกัด การป้อนข้อมูล (ตรงข้ามกับการตรวจสอบ) คุณสามารถทำงานกับกิจกรรมหลักได้ บางสิ่งเช่นนี้

<input type="text" class="numbersOnly" value="" />

และ:

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

สิ่งนี้จะทำให้ผู้ใช้ทราบทันทีว่าพวกเขาไม่สามารถป้อนอักขระอัลฟาและอื่น ๆ ได้มากกว่าในช่วงระยะเวลาการตรวจสอบ

คุณจะยังคงต้องการตรวจสอบเพราะป้อนข้อมูลอาจจะกรอกโดยการตัดและวางด้วยเมาส์หรืออาจเป็นได้โดยใช้แบบฟอร์มอัตโนมัติที่อาจไม่ก่อให้เกิดเหตุการณ์สำคัญ

ฉันคิดว่าคำตอบที่ดีที่สุดคือคำตอบข้างต้นที่จะทำสิ่งนี้

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

แต่ฉันยอมรับว่ามันเป็นความเจ็บปวดเล็กน้อยที่ปุ่มลูกศรและปุ่มลบเคอร์เซอร์ snap snap ไปที่ส่วนท้ายของสตริง (และเนื่องจากว่ามันถูกเตะกลับมาให้ฉันในการทดสอบ)

ฉันเพิ่มในการเปลี่ยนแปลงง่าย

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

วิธีนี้หากมีการกดปุ่มใด ๆ ที่จะไม่ทำให้ข้อความถูกเปลี่ยนเพียงเพิกเฉย ด้วยวิธีนี้คุณสามารถกดลูกศรและลบได้โดยไม่ต้องกระโดดไปจนสุด แต่จะลบข้อความที่ไม่ใช่ตัวเลขออก

ปลั๊กอิน jquery.numeric มีข้อบกพร่องบางอย่างที่ฉันแจ้งผู้เขียน อนุญาตให้ใช้จุดทศนิยมหลายตำแหน่งใน Safari และ Opera และคุณไม่สามารถพิมพ์ backspace, ปุ่มลูกศรหรือตัวควบคุมอื่น ๆ ใน Opera ฉันต้องการอินพุตจำนวนเต็มบวกดังนั้นฉันก็เลยเพิ่งเขียนเองในตอนท้าย

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

ไม่มีปลั๊กอินอีกต่อไปjQueryได้นำjQuery.isNumeric ()ของตัวเองมาเพิ่มใน v1.7

jQuery.isNumeric( value )

กำหนดว่าอาร์กิวเมนต์ของมันมีจำนวนมากขึ้นหรือไม่

ตัวอย่างผลลัพธ์

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

นี่คือตัวอย่างของวิธีการผูก isNumeric () ด้วยฟังเหตุการณ์

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

ปลั๊กอินตัวเลข () ที่กล่าวถึงข้างต้นไม่ทำงานใน Opera (คุณไม่สามารถถอยกลับลบหรือแม้แต่ใช้ปุ่มย้อนกลับหรือไปข้างหน้า)

รหัสด้านล่างใน JQuery หรือ Javascript จะทำงานได้อย่างสมบูรณ์แบบ (และเป็นเพียงสองบรรทัด)

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

ของหลักสูตรนี้มีไว้สำหรับการป้อนตัวเลขที่บริสุทธิ์ (รวมถึง backspace, ลบ, ปุ่มไปข้างหน้า / หลัง) เท่านั้น แต่สามารถเปลี่ยนแปลงได้อย่างง่ายดายเพื่อรวมจุดและลบอักขระ

คุณสามารถใช้ปลั๊กอินการตรวจสอบความถูกต้องด้วยวิธี number ()

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

ไม่จำเป็นต้องใช้รหัสยาวสำหรับการ จำกัด การป้อนหมายเลขเพียงลองใช้รหัสนี้

นอกจากนี้ยังยอมรับค่า int & float ที่ถูกต้องทั้งสองค่า

วิธีการของ Javascript

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

วิธีการ jQuery

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

UPDATE

คำตอบข้างต้นสำหรับกรณีการใช้งานบ่อยที่สุด - ตรวจสอบการป้อนข้อมูลเป็นตัวเลข

แต่ด้านล่างนี้เป็นข้อมูลโค้ดสำหรับกรณีการใช้งานพิเศษ

• อนุญาตจำนวนลบ
• แสดงการกดแป้นที่ไม่ถูกต้องก่อนที่จะลบ

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

ด้านล่างนี้คือสิ่งที่ฉันใช้เพื่อป้องกันการกดแป้น อนุญาตให้ใช้ตัวเลข 0-9 และจุดทศนิยมเท่านั้น ติดตั้งง่ายไม่ใช้โค้ดจำนวนมากและทำงานได้อย่างมีเสน่ห์:

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

<input value="" onkeypress="return isNumberKey(event)">

ขณะที่การปรับปรุงเล็กน้อยที่จะแนะนำนี้คุณสามารถใช้ปลั๊กอินตรวจสอบกับจำนวน () , ตัวเลขและช่วงวิธี ตัวอย่างเช่นต่อไปนี้ช่วยให้มั่นใจว่าคุณจะได้รับจำนวนเต็มบวกระหว่าง 0 ถึง 50:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

คุณไม่เห็นตัวอักษรที่มีลักษณะเวทย์มนตร์และหายตัวไปเมื่อคีย์ลง วิธีนี้ใช้กับวางเมาส์ได้เช่นกัน

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

ฉันพยายามแก้ปัญหานี้ครั้งแรกโดยใช้ jQuery แต่ฉันไม่มีความสุขกับตัวละครที่ไม่พึงประสงค์ (ไม่ใช่ตัวเลข) ปรากฏขึ้นในช่องป้อนข้อมูลก่อนที่จะถูกลบออกจากการกดปุ่ม

กำลังมองหาโซลูชันอื่นฉันพบสิ่งนี้:

จำนวนเต็ม (ไม่ใช่ลบ)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

ที่มา: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example ตัวอย่างสด: http://jsfiddle.net/u8sZq/

จุดทศนิยม (ไม่ใช่ลบ)

หากต้องการอนุญาตจุดทศนิยมเดียวคุณสามารถทำสิ่งนี้:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

ที่มา: เพิ่งเขียนสิ่งนี้ ดูเหมือนว่าจะทำงาน ตัวอย่างสด: http://jsfiddle.net/tjBsF/

การปรับแต่งอื่น ๆ

• หากต้องการอนุญาตให้พิมพ์สัญลักษณ์เพิ่มเติมให้เพิ่มเครื่องหมายเหล่านั้นลงในนิพจน์ทั่วไปที่ทำหน้าที่เป็นตัวกรองรหัสอักขระพื้นฐาน
• เมื่อต้องการใช้ข้อ จำกัด เชิงบริบทอย่างง่าย ๆ ให้ดูที่เนื้อหาปัจจุบัน (สถานะ) ของฟิลด์อินพุต (oToCheckField.value)

บางสิ่งที่คุณอาจสนใจทำ:

• อนุญาตให้ใช้จุดทศนิยมเดียวเท่านั้น
• อนุญาตให้ลบเครื่องหมายเฉพาะในกรณีที่ตำแหน่งที่จุดเริ่มต้นของสตริง สิ่งนี้จะช่วยให้ตัวเลขติดลบ

ข้อบกพร่อง

• ตำแหน่งคาเร็ตไม่พร้อมใช้งานภายในฟังก์ชั่น สิ่งนี้ช่วยลดข้อ จำกัด ด้านบริบทที่คุณสามารถนำไปใช้ได้อย่างมาก (เช่นไม่มีสองสัญลักษณ์ที่ต่อเนื่องกันเท่ากัน) ไม่แน่ใจว่าวิธีที่ดีที่สุดในการเข้าถึงคืออะไร

ฉันรู้ว่าชื่อขอวิธีแก้ปัญหา jQuery แต่หวังว่าจะมีใครบางคนพบว่ามีประโยชน์อยู่ดี

ขอบคุณสำหรับโพสต์ Dave Aaron Smith

ฉันแก้ไขคำตอบของคุณเพื่อยอมรับจุดทศนิยมและตัวเลขจากส่วนของตัวเลข งานนี้สมบูรณ์แบบสำหรับฉัน

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // 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();
                       }
                   }
               });
           });
       };

และใช้สิ่งนี้กับอินพุตทั้งหมดที่คุณต้องการ:

$('selector').ForceNumericOnly();

HTML5 รองรับหมายเลขประเภทอินพุตพร้อมการสนับสนุนเบราว์เซอร์ทั่วโลก 88% + ตาม CanIUse ณ เดือนตุลาคม 2015

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

นี่ไม่ใช่วิธีการแก้ปัญหาที่เกี่ยวข้องกับ JQuery แต่ข้อดีคือบนแป้นพิมพ์ Android สำหรับโทรศัพท์มือถือจะได้รับการปรับให้เหมาะสมสำหรับการป้อนตัวเลข

หรืออาจใช้ข้อความประเภทอินพุตกับพารามิเตอร์ "pattern" ใหม่ รายละเอียดเพิ่มเติมในข้อมูลจำเพาะ HTML5

ฉันคิดว่ามันดีกว่า jquery solution เพราะในคำถามนี้ให้ jquery solution ไม่สนับสนุนตัวคั่นหลักพัน หากคุณสามารถใช้ html5

JSFiddle: https://jsfiddle.net/p1ue8qxj/

ฟังก์ชั่นนี้ทำสิ่งเดียวกันใช้ความคิดบางอย่างข้างต้น

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• แสดงความคิดเห็นด้วยภาพ (ตัวอักษรที่ไม่ถูกต้องปรากฏขึ้นก่อนที่จะหายไป)
• อนุญาตให้ใช้ทศนิยม
• จับหลาย ""
• ไม่มีปัญหากับเดลซ้าย / ขวา ฯลฯ

/ * นี่เป็นเวอร์ชันข้ามเบราว์เซอร์ของ ฉันจะอนุญาตเฉพาะตัวเลข (0-9) ในช่องป้อนข้อมูล HTML โดยใช้ jQuery ได้อย่างไร
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

เพียงแค่เรียกใช้เนื้อหาผ่าน parseFloat () มันจะกลับมาNaNจากการป้อนข้อมูลที่ไม่ถูกต้อง

คุณสามารถใช้autoNumeric จาก decorplanit.com พวกเขามีการสนับสนุนที่ดีสำหรับตัวเลขเช่นเดียวกับสกุลเงินการปัดเศษ ฯลฯ

ฉันใช้ในสภาพแวดล้อม IE6 โดยมีการปรับแต่ง CSS ไม่กี่ครั้งและมันก็เป็นความสำเร็จที่สมเหตุสมผล

ตัวอย่างเช่นคลาส css numericInputสามารถกำหนดได้และสามารถใช้เพื่อตกแต่งฟิลด์ของคุณด้วยมาสก์อินพุตตัวเลข

ดัดแปลงมาจากเว็บไซต์ autoNumeric:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

ฉันคิดว่านี่เป็นวิธีที่ดีในการแก้ปัญหานี้และมันง่ายมาก:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

ตัวอย่าง: JSFiddle

ครอบคลุมสถานการณ์

คำแนะนำที่คล้ายกันส่วนใหญ่ที่นี่ล้มเหลวอย่างน้อยหนึ่งรายการหรือต้องการรหัสจำนวนมากเพื่อครอบคลุมสถานการณ์เหล่านี้ทั้งหมด

1. อนุญาตให้มีเพียง 1 จุดทศนิยม
2. ช่วยให้home, endและarrowกุญแจ
3. อนุญาตdeleteและbackspaceใช้ในดัชนีใด ๆ
4. อนุญาตให้แก้ไขที่ดัชนีใด ๆ (ตราบเท่าที่อินพุตตรงกับ regex)
5. อนุญาต ctrl + v และ shift + insert สำหรับอินพุตที่ถูกต้อง (เช่นเดียวกับการคลิกขวา + วาง)
6. ไม่สั่นค่าข้อความเนื่องจากkeyupไม่ได้ใช้เหตุการณ์
7. คืนค่าการเลือกหลังจากอินพุตไม่ถูกต้อง

สถานการณ์ล้มเหลว

• เริ่มต้นด้วย0.5และลบเฉพาะศูนย์จะไม่ทำงาน สิ่งนี้สามารถแก้ไขได้โดยการเปลี่ยน regex เป็น/^[0-9]*\.?[0-9]*$/และจากนั้นเพิ่มเหตุการณ์ความพร่ามัวเพื่อเติม a 0เมื่อกล่องข้อความเริ่มต้นด้วยจุดทศนิยม (ถ้าต้องการ) ดูสถานการณ์สมมติขั้นสูงนี้ เพื่อดูแนวคิดวิธีการแก้ไขที่ดีกว่านี้

เสียบเข้าไป

ฉันสร้างปลั๊กอิน jqueryง่าย ๆ นี้เพื่อให้ง่ายขึ้น:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

วิธีที่ดีที่สุดคือตรวจสอบส่วนต่างๆของกล่องข้อความเมื่อใดก็ตามที่โฟกัสไม่ชัด

คุณสามารถตรวจสอบว่าเนื้อหาเป็น "หมายเลข" โดยใช้นิพจน์ทั่วไปหรือไม่

หรือคุณสามารถใช้ปลั๊กอินการตรวจสอบความถูกต้องซึ่งโดยทั่วไปจะทำสิ่งนี้โดยอัตโนมัติ

ตรวจสอบรหัสการค้นหานี้สำหรับการใช้ฐานข้อมูล:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

นี่เป็นตัวอย่างข้อมูลที่ฉันเพิ่งทำไป (โดยใช้ส่วนหนึ่งของรหัสโดย Peter Mortensen / Keith Bentrup) สำหรับการตรวจสอบความถูกต้องเปอร์เซ็นต์จำนวนเต็มบนฟิลด์ข้อความ (จำเป็นต้องมี jQuery):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

รหัสนี้:

• อนุญาตให้ใช้ปุ่มตัวเลขหลักและปุ่มกดตัวเลข
• ตรวจสอบความถูกต้องเพื่อยกเว้นตัวอักษร Shift-numeric (เช่น #, $,%, ฯลฯ )
• แทนที่ค่า NaN ด้วย 0
• แทนที่ด้วย 100 ค่าสูงกว่า 100

ฉันหวังว่านี่จะช่วยผู้ที่ขัดสน

พบทางออกที่ดีที่นี่ http://ajax911.com/numbers-numeric-field-jquery/

ฉันเพิ่งเปลี่ยน "keyup" เป็น "keydown" ตามความต้องการของฉัน

หากคุณใช้ HTML5 คุณไม่จำเป็นต้องใช้ความพยายามอย่างมากในการตรวจสอบความถูกต้อง เพียงใช้ -

<input type="number" step="any" />

แอ็ตทริบิวต์ step อนุญาตให้จุดทศนิยมถูกต้อง

วิธีอื่นเพื่อรักษาตำแหน่งคาเร็ตบนอินพุต:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

ข้อดี:

1. ผู้ใช้สามารถใช้ปุ่มลูกศร, Backspace, ลบ, ...
2. ทำงานเมื่อคุณต้องการวางตัวเลข

Plunker: สาธิตการทำงาน

ฉันเพิ่งพบปลั๊กอินที่ดียิ่งขึ้น ช่วยให้คุณควบคุมได้มากขึ้น สมมติว่าคุณมีฟิลด์DOBที่คุณต้องการให้เป็นตัวเลข แต่ยังยอมรับอักขระ "/" หรือ "-"

มันใช้งานได้ดี!

ตรวจสอบออกที่http://itgroup.com.ph/alphanumeric/

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

รหัสนี้ใช้งานได้ดีกับฉันฉันแค่เพิ่ม 46 ในอาร์เรย์ controlKeys เพื่อใช้ช่วงเวลา แต่ฉันไม่คิดว่าเป็นวิธีที่ดีที่สุดที่จะทำ;)

ฉันใช้มันกับผลลัพธ์ที่ดี ..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

ง่ายมากที่เรามีฟังก์ชั่น inbuilt จาวาสคริปต์ "isNaN" อยู่ที่นั่นแล้ว

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});