การป้อนข้อความ HTML อนุญาตเฉพาะการป้อนตัวเลข


852

มีวิธีที่รวดเร็วในการตั้งค่าการป้อนข้อความ HTML ( <input type=text />) เพื่ออนุญาตการกดแป้นตัวเลขเท่านั้น (บวก '.')?


81
วิธีแก้ปัญหามากมายที่นี่ใช้ได้เฉพาะเมื่อกดปุ่ม สิ่งเหล่านี้จะล้มเหลวหากผู้ใช้วางข้อความโดยใช้เมนูหรือถ้าพวกเขาลากและวางข้อความลงในการป้อนข้อความ ก่อนหน้านี้ฉันเคยถูกกัด ระวัง!
Bennett McElwee

83
@JuliusA - คุณเสมอ เสมอต้องฝั่งเซิร์ฟเวอร์การตรวจสอบอยู่แล้ว
Stephen P

46
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
Droogans

14
@Droogans สังเกตเห็นว่ายังปิดใช้งานคีย์อื่น ๆ เช่น TAB เพื่อไปที่อินพุตถัดไปหรือช็อตคัตอื่น ๆ ที่ไม่เกี่ยวข้องโดยตรงกับอินพุตเช่น cmd + R สำหรับการรีเฟรชเว็บไซต์หากอินพุตถูกโฟกัส
Alejandro Pérez

1
ถ้าคุณโอเคกับปลั๊กอินให้ใช้ NumericInput ตัวอย่าง: jsfiddle.net/152sumxu/2รายละเอียดเพิ่มเติมได้ที่นี่stackoverflow.com/a/27561763/82961
Faiz

คำตอบ:


1137

หมายเหตุ:นี่เป็นคำตอบที่อัพเดทแล้ว ความคิดเห็นด้านล่างอ้างถึงเวอร์ชันเก่าซึ่งยุ่งกับรหัส

JavaScript

ลองตัวเองใน JSFiddle

คุณสามารถกรองค่าอินพุตของข้อความ<input>ด้วยsetInputFilterฟังก์ชั่นต่อไปนี้(รองรับการคัดลอก + วาง, ลาก + วาง, แป้นพิมพ์ลัด, การทำงานของเมนูบริบท, คีย์ที่ไม่สามารถพิมพ์ได้, ตำแหน่งคาเร็ต, รูปแบบแป้นพิมพ์ที่แตกต่างกันและเบราว์เซอร์ทั้งหมดตั้งแต่ 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 = "";
      }
    });
  });
}

ตอนนี้คุณสามารถใช้setInputFilterฟังก์ชั่นเพื่อติดตั้งตัวกรองอินพุต:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

ดูตัวอย่างของตัวกรองอินพุตเพิ่มเติมJSFiddle โปรดทราบว่าคุณยังต้องทำการตรวจสอบฝั่งเซิร์ฟเวอร์!

สิ่งที่พิมพ์ด้วยพิมพ์ดีด

นี่คือเวอร์ชั่นของ TypeScript

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

นอกจากนี้ยังมีรุ่น jQuery ดูคำตอบนี้นี้

HTML 5

HTML 5 มีโซลูชันแบบเนทีฟด้วย<input type="number">(ดูข้อกำหนด ) แต่โปรดทราบว่าการสนับสนุนเบราว์เซอร์แตกต่างกันไป:

  • เบราว์เซอร์ส่วนใหญ่จะตรวจสอบความถูกต้องของอินพุตเมื่อส่งแบบฟอร์มไม่ใช่เมื่อพิมพ์
  • เบราว์เซอร์มือถือส่วนใหญ่ไม่สนับสนุนstep, minและmaxคุณลักษณะ
  • Chrome (รุ่น 71.0.3578.98) ยังคงอนุญาตให้ผู้ใช้ป้อนอักขระeและEลงในฟิลด์ ดูคำถามนี้ด้วย
  • Firefox (รุ่น 64.0) และ Edge (EdgeHTML เวอร์ชัน 17.17134) ยังคงอนุญาตให้ผู้ใช้ป้อนข้อความใด ๆลงในฟิลด์

ลองตัวเองใน w3schools.com


4
แม้ว่านี่จะเป็นตัวเลือกที่ดี แต่ก็ยังอนุญาตให้ป้อนตัวอักษรเช่น / หลายจุดตัวดำเนินการอื่น ๆ ได้
Mahendra Liya

6
ยังไม่รองรับ Firefox 21 (ฉันไม่ได้พูดถึง IE9 หรือรุ่นก่อนหน้า ... )
JBE

67
หมายเลขประเภทอินพุตไม่ได้ใช้เพื่อให้อินพุตของคุณยอมรับเฉพาะตัวเลข มันมีไว้สำหรับอินพุตที่ระบุ 'จำนวนรายการ' ตัวอย่างเช่น Chrome เพิ่มลูกศรขนาดเล็กสองลูกเพื่อเพิ่มจำนวนที่ลดลงทีละหนึ่ง อินพุตที่เป็นตัวเลขเท่านั้นที่เหมาะสมเป็นสิ่งที่ไม่ใช้ HTML
Erwin

9
type = "number" ไม่ได้ป้องกันการป้อนข้อความที่ไม่ถูกต้องในฟิลด์ ปรากฏว่าคุณสามารถตัดและวางข้อมูลขยะลงในฟิลด์ได้แม้ในโครเมี่ยม
เลิศ

6
สิ่งเดียวที่ฉันจะเพิ่มไปนี้คือการเปลี่ยน Ctrl + A บรรทัดเพื่อรวมผู้ใช้ MacOSX:(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))
MForMarlon

280

ใช้ DOM นี้

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

และสคริปต์นี้

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();
  }
}

12
german-settings บน eeepc 900. บางคีย์สำหรับ usabiliy ที่ดีไม่ทำงาน: - backspace (keyCode: 8) - ปุ่มนำทางซ้ายและขวา (keyCode: 37, 38) การคัดลอกและวางยังเป็นไปได้ ...
Michael Piendl

11
คนส่วนใหญ่สนใจการมีข้อผิดพลาดของสคริปต์ปรากฏขึ้นสะท้อนให้เห็นถึงไม่ดีในเว็บไซต์ของคุณ
Robert Jeppesen

14
ปัญหาเล็กน้อยกับรหัสนี้ คุณสามารถเข้า มากกว่าหนึ่งครั้งที่สองมันไม่อนุญาตให้ใช้คีย์ลบวิธีแก้ปัญหาใด ๆ ?
coure2011

4
ฉันสนใจ backspace ลบและลูกศรไม่ทำงาน หากคุณลบ "theEvent.keycode ||" และเพิ่ม: "ถ้า (/ [- ~] / &&! regex.test (คีย์)) {" ดังนั้นมันจะทำงานได้ดีขึ้น (สำหรับ ASCII / UTF) แต่มันจะไม่ปฏิเสธตัวอักษรจีน! :)
Sam Watkins

4
สิ่งนี้อนุญาตให้บางคนวางสิ่งที่สุ่มไปยังอินพุต
Vitim.us

137

ฉันค้นหามานานและยากสำหรับคำตอบที่ดีสำหรับสิ่งนี้และเราต้องการอย่างยิ่ง<input type="number"แต่สั้น ๆ ว่า 2 สิ่งนี้เป็นวิธีที่กระชับที่สุดที่ฉันสามารถหาได้:

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

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

<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) )">

4
ประเภทการป้อนข้อมูล = "จำนวน" จะมาในรูปแบบ HTML 5 - และคุณสามารถใช้ JavaScript เป็น polyfill ย้อนกลับ ... stevefenton.co.uk/Content/Blog/Date/201105/Blog/...
เฟนตัน

5
วิธีการที่ดี แต่สามารถหักได้โดยการกดคีย์ที่ไม่ยอมรับ
Scott Brown

8
เปลี่ยน regex เป็น/[^\d+]/และใช้งานได้กับการกดค้างไว้
boecko

11
@Becko ขอบคุณสำหรับสิ่งนี้ แต่โปรดทราบว่ามันควรจะเป็น/[^\d]+/แทน ทางออกที่ดีแม้ว่า นอกจากนี้ @ user235859
Mosselman

11
เขาต้องการอนุญาต.เช่นกัน คุณควรสร้างมันขึ้นมา/[^0-9.]/g
Qsario

93

นี่คือตัวอย่างง่าย ๆ ที่อนุญาตให้มีทศนิยมหนึ่งตำแหน่ง แต่ไม่เกิน:

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


12
หมายเลขอ้างอิง: คัดลอก + วางลาก 'n ดรอปอนุญาตเพียง 1 ทศนิยมแท็บลบ backspace - ใช้อันนี้
Mathemats

สามารถสกัดตรรกะนี้ภายในข้อมูลเข้าเพื่อให้สามารถใช้ทั่วโลกได้หรือไม่?
ema

@ema - ใช่ดูคำตอบอื่น ๆ ของฉันที่นี่ซึ่งแสดงว่าคุณสามารถใช้กฎโดยใช้คลาสได้อย่างไร
billynoah

ถ้าคุณใช้สิ่งนี้ในรูปแบบเชิงมุมค่าจะไม่ปรับปรุงในค่าการควบคุมแบบฟอร์ม
Ale_info

น่ากลัว ฉันเปลี่ยนกิจกรรมเป็น this.value = this.value.replace (/ [^ 0-9 .-] / g, '') .replace (/(\..*)\./ g, '$ 1') แทนที่ (/ ^ 0 + / g, '') .replace (/ (? <! ^) - / g, ''); วิธีนี้จะจัดการได้เพียง - ที่จุดเริ่มต้นและไม่อนุญาตให้ 0 ที่จุดเริ่มต้นของตัวเลข
brenth

54

และอีกตัวอย่างหนึ่งซึ่งใช้งานได้ดีสำหรับฉัน:

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;
    }
};

แนบไปกับเหตุการณ์ปุ่มกด

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

และ HTML:

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

นี่คือตัวอย่าง jsFiddle


สิ่งที่เกี่ยวกับข้อความที่วาง?
Jason Ebersey

เหตุใดฉันจึงได้รับ "เหตุการณ์ไม่ได้กำหนด" เมื่อฉันเรียกใช้ฟังก์ชันนี้
Vincent

1
สิ่งนี้ไม่ทำงานบน Firefox เมื่อ event.keyCode ถูกส่งคืนเสมอ 0 ฉันแก้ไขด้วยรหัสใหม่: ฟังก์ชัน validateNumber (เหตุการณ์) {var key = event.which || event.charCode || event.keyCode || 0; if (key == 8 || key == 46 || key == 37 || key == 39) {return true; } อื่นถ้า (คีย์ <48 || สำคัญ> 57) {ส่งคืนเท็จ } คืนค่าจริง };
Luan Nguyen

1
ดังที่ @Jessica กล่าวไว้คุณเพิ่ม apostrophe และเครื่องหมายเปอร์เซ็นต์
Alejandro Nava

1
ใกล้มาก! แต่อนุญาตให้มีทศนิยมมากกว่าหนึ่ง
Kross

52

HTML5 มี<input type=number>แล้วที่เหมาะกับคุณ ขณะนี้มีเพียง Opera เท่านั้นที่รองรับอย่างเป็นทางการ แต่มีโครงการที่มีการใช้งาน JavaScript


นี่คือการกำหนดเอกสารซึ่งเบราว์เซอร์สนับสนุนแอตทริบิวต์นี้: caniuse.com/input-number จากการเขียนสิ่งนี้ Chrome และ Safari ทั้งสองสนับสนุนฟิลด์ประเภทนี้อย่างเต็มที่ IE 10 มีการสนับสนุนบางส่วนและ Firefox ไม่มีการสนับสนุน
Nathan Wallace

ปัญหาเดียวtype=numberคือไม่รองรับ IE9
J Rod

@JRod มีpolyfillสำหรับ IE แบบเก่า ข้อมูลเพิ่มเติมที่นี่
jkdev

6
ปัญหาแรกtype=numberคือการอนุญาตให้ใช้eถ่านเพราะมันถือว่าe+10เป็นตัวเลข ปัญหาที่สองคือคุณไม่สามารถ จำกัด จำนวนตัวอักษรได้สูงสุดในอินพุต
Hakan Fıstık

ปัญหาอีกอย่างคือถ้าประเภทเป็นตัวเลขฉันจะไม่ได้รับประโยชน์จากการตั้งค่าประเภทเช่น: "tel"
ScottyBlades

49

คำตอบส่วนใหญ่ที่นี่ทุกคนมีความอ่อนแอของการใช้เหตุการณ์คีย์

คำตอบหลายข้อจะจำกัดความสามารถของคุณในการเลือกข้อความด้วยมาโครคีย์บอร์ดคัดลอก + วางและพฤติกรรมที่ไม่พึงประสงค์อื่น ๆ ดูเหมือนว่าคนอื่นจะขึ้นอยู่กับปลั๊กอิน jQuery เฉพาะซึ่งฆ่าแมลงวันด้วยปืนกล

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

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

jQuery 1.7+ ต้องการ นี่เป็นคำตอบที่สมบูรณ์ยิ่งขึ้นเนื่องจากใช้ในอินพุตบัญชีผ่าน "คัดลอก" และมันก็ง่ายขึ้น!
Memochipan

อีกทางเลือกหนึ่ง: replace(/[^\d]+/g,'')แทนที่ไม่ใช่ตัวเลขทั้งหมดด้วยสตริงว่าง ไม่ต้องการตัวดัดแปลง "i" (ตัวพิมพ์เล็กและตัวพิมพ์เล็ก)
Memochipan

สิ่งนี้ควรอยู่ด้านบนเนื่องจากตัวจัดการเหตุการณ์ "onkey" ในแท็กไม่ควรเผยแพร่อีกต่อไป ...
gpinkas

อันนี้เป็นคำตอบที่ดีที่สุดที่นี่ แต่ไม่อนุญาตให้มีตัวเลขที่มีทศนิยม ความคิดใด ๆ ที่สามารถทำงานได้?
Atirag

6
@Atirag ถ้าคุณต้องการทศนิยมคุณสามารถเปลี่ยน regex ได้/[^\d,.]+/
EJTH

41

ฉันเลือกใช้ทั้งสองคำตอบที่กล่าวถึงที่นี่เช่น

<input type="number" />

และ

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);">


คำตอบที่ดีเลิศ ... +1 นอกจากนี้คุณยังสามารถลดคำสั่ง if เป็น: return !(charCode > 31 && (charCode < 48 || charCode > 57));
schadeck

7
วิธีการเกี่ยวกับการลบว่า? คุณต้องการตัวเลข แต่คุณอาจต้องการคนที่จะสามารถที่จะแก้ไขให้ถูกต้องโดยไม่ต้องรีเฟรชหน้า ...
มาร์ติน Erlic

40

HTML5 รองรับ regexes ดังนั้นคุณสามารถใช้สิ่งนี้:

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

คำเตือน: เบราว์เซอร์บางตัวยังไม่รองรับ


7
HTML5 <input type=number>นอกจากนี้ยังมี
Mathias Bynens

จริง คุณควรตอบคำถามนี้ Ooops, @ Ms2ger มีแล้ว
james.garriss

<input type = number> เพิ่มลูกศรสำหรับการเพิ่มและลดลงในเบราว์เซอร์บางประเภทดังนั้นนี่จึงเป็นทางออกที่ดีเมื่อเราต้องการหลีกเลี่ยงเครื่องปั่นด้าย
Ayrad

35
รูปแบบได้รับการตรวจสอบเมื่อส่งเท่านั้น คุณยังสามารถป้อนตัวอักษร
Erwin

อะไร+หมายถึงในแอตทริบิวต์รูปแบบ?
PlanetHackers

18

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();
    }
}

เพิ่มเติมคุณสามารถเพิ่มจุลภาคระยะเวลาและลบ (, .-)

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

HTML

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

ทำงานไม่ถูกต้องบนคีย์บอร์ดที่ต้องใช้ปุ่ม shift เพื่อป้อนหมายเลข (เช่นแป้นพิมพ์ AZERTY แบบยุโรป)
กัปตันเซนซิเบิล

ขอบคุณชายคุณเข้าใจคำถามจริงๆ! ตัวอย่างที่ดีและการจัดการนอกหลักสูตร หรือ (ซึ่งคนส่วนใหญ่ต้องการหากพวกเขาทำงานกับตัวเลข)
real_yggdrasil

นี่เป็นสิ่งเดียวที่ทำงานที่ป้องกันการวางค่าที่ไม่ใช่ตัวเลข
DEREK LEE

16

ง่ายมาก ....

// ในฟังก์ชั่น JavaScript (สามารถใช้ HTML หรือ PHP)

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

ในการป้อนแบบฟอร์มของคุณ:

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

ด้วยอินพุตสูงสุด (ข้างต้นใช้สำหรับตัวเลข 12 หลัก)


อย่าทำอย่างนั้น! สิ่งนี้จะปิดกั้นทุกอย่าง numpad, ปุ่มลูกศร, ปุ่มลบ, ทางลัด (เช่น CTRL + A, CTRL + R), แม้แต่ปุ่ม TAB ที่น่ารำคาญจริงๆ!
Korri

@Korri ฉันไม่ปฏิบัติตามสิ่งที่ดูเหมือนจะเป็นปัญหาหรือไม่ มันทำงานได้ดีในกรณีของฉัน
uneakharsh

บรรทัดแรกต้องเปลี่ยนเป็น:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

15

2 โซลูชั่น:

ใช้ตัวตรวจสอบความถูกต้องของฟอร์ม (ตัวอย่างเช่นกับปลั๊กอินการตรวจสอบความถูกต้องของ jQuery )

ทำการตรวจสอบในระหว่างเหตุการณ์ onblur (เช่นเมื่อผู้ใช้ออกจากสนาม) ของฟิลด์อินพุตด้วยนิพจน์ทั่วไป:

<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);"/>

น่าสนใจที่ฉันต้องให้ regex คือ "^ \\ d \\.? \\ d * $" แต่นั่นอาจเป็นเพราะหน้านั้นถูกเรียกใช้ผ่านการแปลง XSLT
พอลทอมบลิน

ฉันคิดว่าการแสดงออกปกติไม่ถูกต้อง ฉันใช้บรรทัดนี้:var regExpr = /^\d+(\.\d*)?$/;
costa

@costa ไม่แน่ใจว่าหากผู้ใช้ต้องการที่จะใส่.123(แทน0.123) เช่น?
Romain Linsolas

@romaintaz คุณพูดถูก แต่คุณต้องเปลี่ยนนิพจน์ทั่วไปเพื่อให้แน่ใจว่าในกรณีที่ไม่มีเลขหน้าจุดมีตัวเลขอยู่หลังจุด บางสิ่งเช่นนี้: var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;.
costa

14

วิธีที่ปลอดภัยกว่าคือการตรวจสอบค่าของอินพุตแทนการไฮแจ็กคีย์กดและพยายามกรองคีย์โค้ด

วิธีนี้ทำให้ผู้ใช้มีอิสระในการใช้แป้นลูกศรแป้นตัวดัดแปลงพื้นที่ถอยหลังลบใช้แป้นพิมพ์มาตรฐานที่ไม่เป็นมาตรฐานใช้เมาส์เพื่อวางใช้ลากและวางข้อความแม้ใช้อินพุตสำหรับการเข้าถึง

สคริปต์ด้านล่างอนุญาตให้ใช้จำนวนบวกและลบ

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>

แก้ไข: ฉันลบคำตอบเก่าของฉันเพราะฉันคิดว่ามันเก่าแล้ว


นี่ดูเหมือนจะครอบคลุมกรณีส่วนใหญ่อย่างแน่นอน
Zia Ul Rehman Mughal

13

คุณสามารถใช้รูปแบบสำหรับสิ่งนี้:

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

ที่นี่คุณสามารถดูเคล็ดลับที่สมบูรณ์อินเตอร์เฟซที่เว็บไซต์บนมือถือ


เคยชินทำงานใน IE8 และ 9 ดูcaniuse ยังเป็นคำตอบที่ดี
aloisdg กำลังจะย้ายไปยัง codidact.com

นอกจากนี้คุณยังสามารถเพิ่มชื่อ = "ตัวเลขเท่านั้น" เพื่อแสดงข้อผิดพลาด
thouliha

13

กรุณาหาวิธีแก้ปัญหาดังกล่าวด้านล่าง ในผู้ใช้รายนี้จะสามารถป้อนเฉพาะnumericค่านอกจากนี้ผู้ใช้ไม่สามารถจะสามารถcopy, paste, dragและdropในการป้อนข้อมูล

อักขระที่อนุญาต

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

ไม่อนุญาตให้ใช้อักขระและอักขระผ่านเหตุการณ์

  • ค่าตัวอักษร
  • ตัวละครพิเศษ
  • สำเนา
  • วาง
  • ลาก
  • Drop

$(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">

แจ้งให้เราทราบหากไม่ได้ผล


11

หากคุณต้องการที่จะขอแนะนำให้อุปกรณ์ (อาจจะเป็นโทรศัพท์มือถือ) <input type="number">ระหว่างอัลฟ่าหรือตัวเลขที่คุณสามารถใช้


11

อีกตัวอย่างหนึ่งที่คุณสามารถเพิ่มตัวเลขได้เฉพาะในฟิลด์อินพุตไม่สามารถตัวอักษร

<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');">

10

การใช้งานแบบสั้นและหวานโดยใช้ jQuery และ replace () แทนที่จะดูที่ event.keyCode หรือ event.which:

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

เฉพาะผลข้างเคียงขนาดเล็กที่ตัวอักษรที่พิมพ์ปรากฏขึ้นชั่วขณะและ CTRL / CMD + A ดูเหมือนจะทำงานแปลก ๆ


9

input type="number" เป็นแอตทริบิวต์ HTML5

ในกรณีอื่น ๆ สิ่งนี้จะช่วยคุณ:

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)"/>

บรรทัดแรกต้องเปลี่ยนเป็น:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

9

รหัส 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();
            }
        }
    }

รหัส HTML:

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

ทำงานได้อย่างสมบูรณ์เพราะรหัส Backspace คือ 8 และนิพจน์ regex ไม่อนุญาตดังนั้นจึงเป็นวิธีที่ง่ายในการข้ามจุดบกพร่อง :)


9

วิธีง่ายๆในการแก้ไขปัญหานี้คือการใช้ฟังก์ชั่น jQuery เพื่อตรวจสอบกับ regex charaters ที่พิมพ์ในกล่องข้อความตัวอย่างเช่น:

รหัส html ของคุณ:

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

และฟังก์ชั่น js ใช้ 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"/>


		


8

เป็นเพียงตัวแปรอื่นที่ใช้ jQuery

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

8

เพียงแค่ใช้type = "number"ตอนนี้คุณสมบัตินี้รองรับเบราว์เซอร์ส่วนใหญ่

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

ฉันไม่ได้ตรวจสอบข้อมูลคือ--1(2 ลบอักขระก่อนหน้า 1)
Ngoc Nam

6

คุณยังสามารถเปรียบเทียบค่าอินพุต (ซึ่งถือว่าเป็นสตริงโดยค่าเริ่มต้น) กับตัวเองที่บังคับเป็นตัวเลขเช่น:

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

อย่างไรก็ตามคุณต้องผูกสิ่งนั้นกับเหตุการณ์เช่นการกดคีย์เป็นต้น


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

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

6

ฉันเห็นคำตอบที่ยอดเยี่ยม แต่ฉันชอบพวกเขาที่เล็กและเรียบง่ายที่สุดเท่าที่จะทำได้ดังนั้นอาจมีบางคนได้รับประโยชน์จากมัน ฉันจะใช้จาวาสคริปต์Number()และisNaNฟังก์ชั่นเช่นนี้:

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

หวังว่านี่จะช่วยได้


1
ฉันรักสิ่งนี้! วิธีการแก้ปัญหาที่สง่างามไม่มีส่วนเกี่ยวข้องกับ regex
Levi Roberts

นี่ไม่ใช่คำตอบสำหรับคำถาม OP ขอให้อนุญาตเฉพาะข้อความในอินพุตไม่ใช่ตรวจสอบหลังจากนั้น
ทิมแมน

ใช่นั่นคือความจริง! แต่มีคำตอบที่ยอมรับแล้วซึ่งฉันคิดว่าเป็นสิ่งที่ดี แต่ฉันคิดว่านี่อาจช่วยคนได้รวมทั้งมันดีและสะอาด
Sicha

5

ใช้ DOM นี้:

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

และสคริปต์นี้:

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();}
    }
}

... หรือสคริปต์นี้ไม่มี indexOf ใช้สอง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();}
    }
}

ฉันใช้แอ็ตทริบิวต์ onkeydown แทน onkeypress เพราะแอ็ตทริบิวต์ onkeydown ถูกตรวจสอบก่อนแอ็ตทริบิวต์ onkeypress ปัญหาจะอยู่ในเบราว์เซอร์ Google Chrome

ด้วยแอตทริบิวต์ "onkeypress" TAB จะไม่สามารถควบคุมได้ด้วย "preventDefault" บน google chrome อย่างไรก็ตามด้วยแอตทริบิวต์ "onkeydown" TAB จะสามารถควบคุมได้!

รหัส ASCII สำหรับ TAB => 9

สคริปต์แรกมีรหัสน้อยกว่าวินาทีอย่างไรก็ตามอาร์เรย์ของอักขระ ASCII ต้องมีคีย์ทั้งหมด

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




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




ในกรณีของปุ่มตัวเลขมีเพียง 10 (0 - 9) แต่ถ้าเป็น 1 ล้านจะไม่เหมาะสมที่จะสร้างอาร์เรย์ด้วยปุ่มเหล่านี้ทั้งหมด

รหัส ASCII:

  • 8 ==> (Backspace);
  • 46 => (ลบ);
  • 37 => (ลูกศรซ้าย);
  • 39 => (ลูกศรขวา);
  • 48 - 57 => (ตัวเลข);
  • 36 => (บ้าน);
  • ต 35 => (จบ);

5

นี่คือฟังก์ชั่นที่ได้รับการปรับปรุง:

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();
  }
}

4

วิธีที่ดีที่สุด (อนุญาตให้ใช้ตัวเลขทุกประเภท - ค่าลบจริง, บวกจริง, ลบ iinteger, จำนวนเต็มบวก) คือ:

$(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();
    };
}); 

4

นี่เป็นโซลูชันเพิ่มเติมของgeowa4รุ่นเพิ่มเติม รองรับminและmaxคุณสมบัติ หากตัวเลขอยู่นอกช่วงค่าก่อนหน้าจะปรากฏขึ้น

คุณสามารถทดสอบได้ที่นี่

การใช้งาน: <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'));
                }

            }       
    });     
});

หากอินพุตเป็นแบบไดนามิกให้ใช้สิ่งนี้:

$(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'));
            }
    }); 
});

@ UserB สิ่งนี้ไม่ควรลบอะไรเลย
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.