ฉันจะรับค่า"จริง"ของ<input type="number">ฟิลด์ได้อย่างไร

ฉันมีinputกล่องและฉันใช้ประเภทอินพุต HTML5 ที่ใหม่กว่าnumber:

<input id="edQuantity" type="number">

ส่วนใหญ่รองรับใน Chrome 29:

สิ่งที่ฉันต้องการตอนนี้คือความสามารถในการอ่านค่า"ดิบ"ที่ผู้ใช้ป้อนในช่องป้อนข้อมูล หากผู้ใช้ป้อนตัวเลข:

แล้วedQuantity.value = 4และทุกอย่างก็เรียบร้อยดี

แต่ถ้าผู้ใช้ป้อนข้อความที่ไม่ถูกต้องฉันต้องการให้ช่องป้อนข้อมูลเป็นสีแดง:

น่าเสียดายสำหรับtype="number"ช่องป้อนข้อมูลหากค่าในกล่องข้อความไม่ใช่ตัวเลขvalueจะส่งคืนสตริงว่าง:

edQuantity.value = "" (String);

(ใน Chrome 29 เป็นอย่างน้อย)

ฉันจะรับค่า"ดิบ"ของ<input type="number">คอนโทรลได้อย่างไร

ฉันพยายามค้นหารายการคุณสมบัติอื่น ๆ ของช่องป้อนข้อมูลของ Chrome:

ฉันไม่เห็นสิ่งใดที่คล้ายกับอินพุตจริง

ฉันไม่สามารถหาวิธีที่จะบอกได้ว่ากล่องนั้น "ว่าง"หรือไม่ บางทีฉันอาจจะสรุปได้:

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

หมายเหตุ : คุณสามารถละเว้นทุกสิ่งหลังจากกฎแนวนอน เป็นเพียงฟิลเลอร์เพื่อปรับคำถาม นอกจากนี้: อย่าสับสนตัวอย่างกับคำถาม ผู้คนอาจต้องการคำตอบสำหรับคำถามนี้ด้วยเหตุผลอื่นนอกเหนือจากการระบายสีกล่องสีแดง (ตัวอย่างหนึ่ง: การแปลงข้อความ"four"เป็น"4"สัญลักษณ์ละตินระหว่างเหตุการณ์ onBlur)

ฉันจะรับค่า"ดิบ"ของ<input type="number">คอนโทรลได้อย่างไร

การอ่านโบนัส

• jsFiddle จากทั้งหมดข้างต้น (อัพเดท)
• รายการ Quirkmode.org สำหรับประเภทอินพุตใหม่

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

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

โดยระบุประเภท (<input type="number"> ) คุณกำลังขอให้เบราว์เซอร์ทำงานให้คุณ ในทางกลับกันหากคุณต้องการจับอินพุตที่ไม่ใช่ตัวเลขและทำอะไรกับมันคุณจะต้องพึ่งพาฟิลด์ป้อนข้อความที่พยายามและจริงแบบเก่าและแยกวิเคราะห์เนื้อหาด้วยตัวคุณเอง

W3นอกจากนี้ยังมีรายละเอียดเดียวกันและเพิ่ม:

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

ไม่ได้ตอบคำถาม แต่วิธีแก้ปัญหาที่เป็นประโยชน์คือการตรวจสอบ

edQuantity.validity.valid

ValidityStateของวัตถุให้เบาะแสเกี่ยวกับสิ่งที่ผู้ใช้ป้อน พิจารณาtype="number"อินพุตด้วย a minและmaxset

<input type="number" min="1" max="10">

เราต้องการใช้เสมอ.validity.validต้องการที่จะใช้

คุณสมบัติอื่น ๆ ให้ข้อมูลโบนัสเท่านั้น:

User's Input  .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

คุณจะต้องตรวจสอบให้แน่ใจว่าเบราว์เซอร์รองรับการตรวจสอบความถูกต้องของ HTML5 ก่อนใช้งาน:

function ValidateElementAsNumber(element)
{
   //Public Domain: no attribution required.
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

โบนัส

Spudly มีคำตอบที่เป็นประโยชน์ที่เขาลบ:

เพียงแค่ใช้ CSS :invalidตัวเลือกสำหรับสิ่งนี้

input[type=number]:invalid {
    background-color: #FFCCCC;
}

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

รองรับเบราว์เซอร์สำหรับ <input type='number'>นั้นใกล้เคียงกัน :invalidดังนั้นจึงไม่มีปัญหา

อ่านเพิ่มเติมเกี่ยวกับ:invalidที่นี่

input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

ติดตามคีย์ที่กดทั้งหมดตามรหัสคีย์

ฉันคิดว่าคน ๆ หนึ่งสามารถฟังเหตุการณ์คีย์อัพและเก็บอาร์เรย์ของอักขระทั้งหมดที่ป้อนตามรหัสของพวกเขา แต่มันเป็นงานที่ค่อนข้างน่าเบื่อและอาจเกิดข้อบกพร่องได้ง่าย

http://unixpapa.com/js/key.html

เลือกอินพุตและรับการเลือกเป็นสตริง

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

เครดิตทั้งหมดถึง: int32_t