Làm cách nào để lấy giá trị "thực" của một <input type="number">trường?

Tôi có một inputhộp và tôi đang sử dụng kiểu nhập HTML5 mới hơn number:

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

Điều này hầu hết được hỗ trợ trong Chrome 29:

Điều tôi cần bây giờ là khả năng đọc giá trị "thô" mà người dùng đã nhập vào hộp nhập liệu. Nếu người dùng đã nhập một số:

sau đó edQuantity.value = 4 , và tất cả đều tốt.

Nhưng nếu người dùng nhập văn bản không hợp lệ, tôi muốn tô màu hộp nhập liệu màu đỏ:

Thật không may, đối với type="number"hộp nhập liệu, nếu giá trị trong hộp văn bản không phải là số thì valuesẽ trả về một chuỗi trống:

edQuantity.value = "" (String);

(ít nhất trong Chrome 29)

Làm cách nào tôi có thể lấy giá trị "thô" của một <input type="number">điều khiển?

tôi đã thử xem qua danh sách các thuộc tính khác của hộp nhập liệu của Chrome:

tôi không thấy bất cứ điều gì giống với đầu vào thực tế.

Tôi cũng không thể tìm cách để biết hộp "trống" hay không. Có lẽ tôi đã có thể suy ra:

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

Lưu ý : Bạn có thể bỏ qua mọi thứ sau quy tắc ngang; nó chỉ là phụ để biện minh cho câu hỏi. Ngoài ra: đừng nhầm lẫn ví dụ với câu hỏi. Mọi người có thể muốn câu trả lời cho câu hỏi này vì những lý do khác ngoài việc tô màu hộp màu đỏ (Một ví dụ: chuyển đổi văn bản "four"sang tiếng Latin"4" biểu tượng trong sự kiện onBlur)

Làm cách nào tôi có thể lấy giá trị "thô" của một <input type="number">điều khiển?

Đọc thêm

• jsFiddle của tất cả những điều trên (đã cập nhật)
• Mục nhập quirkmode.org cho các loại đầu vào mới

Theo WHATWG , bạn sẽ không thể nhận được giá trị trừ khi đó là đầu vào số hợp lệ. Thuật toán sanitization của trường số đầu vào cho biết trình duyệt phải đặt giá trị thành một chuỗi trống nếu đầu vào không phải là số dấu phẩy động hợp lệ.

Các thuật toán giá trị thanh trùng cho là như sau: Nếu giá trị của nguyên tố này không phải là một số dấu chấm động có hiệu lực , sau đó đặt nó vào chuỗi rỗng để thay thế.

Bằng cách chỉ định loại ( <input type="number">), bạn đang yêu cầu trình duyệt thực hiện một số công việc cho bạn. Mặt khác, nếu bạn muốn có thể nắm bắt đầu vào không phải là số và làm điều gì đó với nó, bạn phải dựa vào trường nhập văn bản đã được thử và đúng cũ và tự mình phân tích cú pháp nội dung.

Các W3 cũng có thông số kỹ thuật tương tự và cho biết thêm:

Tác nhân người dùng không được cho phép người dùng đặt giá trị thành một chuỗi không trống không phải là số dấu phẩy động hợp lệ.

Nó không trả lời câu hỏi, nhưng giải pháp hữu ích là kiểm tra

edQuantity.validity.valid

Các ValidityStatecủa một đối tượng cung cấp cho các đầu mối về những gì người dùng nhập vào. Xem xét type="number"đầu vào với một minvà maxđặt

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

Chúng tôi luôn muốn sử dụng .validity.valid.

Các thuộc tính khác chỉ cung cấp thông tin thưởng:

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

Bạn sẽ phải đảm bảo rằng trình duyệt hỗ trợ xác thực HTML5 trước khi sử dụng:

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

Tặng kem

Spudly có một câu trả lời hữu ích mà anh ấy đã xóa:

Chỉ cần sử dụng :invalidbộ chọn CSS cho việc này.

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

Điều này sẽ kích hoạt phần tử của bạn chuyển sang màu đỏ bất cứ khi nào nhập giá trị không phải số.

Hỗ trợ trình duyệt cho <input type='number'>cũng giống như :invalid, vì vậy không có vấn đề gì ở đó.

Đọc thêm về :invalid ở đây .

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

Theo dõi tất cả các phím đã nhấn dựa trên mã phím của chúng

Tôi cho rằng người ta có thể nghe các sự kiện keyup và giữ một loạt các ký tự đã nhập, dựa trên mã khóa của họ. Nhưng đó là một nhiệm vụ khá tẻ nhạt và có thể dễ xảy ra lỗi.

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

Chọn đầu vào và nhận lựa chọn dưới dạng chuỗi

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

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

<input type='number'>

Tất cả tín dụng cho: int32_t