Tại sao đầu vào html với kiểu Số thứ tự cho phép chữ cái 'e' được nhập vào trường?


216

Tôi có phần tử đầu vào html5 sau:

<input type="number">

Tại sao đầu vào này cho phép nhập ký tự 'e' vào trường đầu vào? Không có ký tự bảng chữ cái khác có thể được nhập (như mong đợi)

Sử dụng chrome v. 44.0.2403.107

Để xem ý tôi là gì: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
Nó cũng cho phép bạn nhập +, - và .nhiều lần trong một số trình duyệt.
nu everest

Câu trả lời:


217

Bởi vì đó chính xác là cách mà thông số kỹ thuật nói rằng nó sẽ hoạt động. Số đầu vào có thể chấp nhận số dấu chấm động , bao gồm cả những biểu tượng tiêu cực và ehay Enhân vật (trong đó số mũ là số sau ehoặc E):

Một số dấu phẩy động bao gồm các phần sau, theo thứ tự chính xác sau:

  1. Tùy chọn, ký tự đầu tiên có thể là -ký tự "".
  2. Một hoặc nhiều ký tự trong phạm vi " 0—9".
  3. Tùy chọn, các phần sau, theo thứ tự chính xác sau:
    1. một .nhân vật ""
    2. một hoặc nhiều ký tự trong phạm vi " 0—9"
  4. Tùy chọn, các phần sau, theo thứ tự chính xác sau:
    1. một eký tự "" hoặc " E"
    2. tùy chọn, một -ký tự "" hoặc " +"
    3. Một hoặc nhiều ký tự trong phạm vi " 0—9".

2
À, cảm ơn. Tôi đã nhìn nhầm thông số
Gnarlywhale

4
Tôi vẫn còn gặp khó khăn vì điều này, trước hết tôi không phải là nhà toán học, vậy "e" đại diện cho điều gì trong bối cảnh của một con số? Thứ hai tôi không hiểu tại sao input.value là một chuỗi trống ngay khi bạn viết "e" trong đó, mặc dù có số và ký tự được cho phép ...
Simon

9
@Simon, sử dụng erất hữu ích cho việc cô đọng số lượng lớn mà nếu không thì sẽ rất tẻ nhạt. Như một ví dụ tầm thường,2e2 = 2*10^2 = 200
Gnarlywhale

3
@Simon "ngay khi tôi viết e" , vâng, vâng "4e" không phải là một số, trong khi ví dụ "4e + 0" là một số hợp lệ (4). Nếu bạn có một số mã javascript phía máy khách "hoạt động" với đầu vào một phần của người dùng, bạn phải cho người dùng thời gian để hoàn thành chỉnh sửa đầu vào của mình để cung cấp giá trị đầy đủ và không can thiệp nửa chừng vào chỉnh sửa. Nếu bạn có đầu vào "không xác định" từ đầu vào "4e + 0", hãy sửa trình phân tích cú pháp "thành số" của bạn. Ví dụ từ câu hỏi hoạt động tốt, báo cáo "4e + 1" là lỗi và "4e + 0" được trả về chính xác là "4e + 0" (tức là số từ 1 đến 5).
Ped7g

4
@Anthony Không, elà viết tắt của Exponent.
Scott Marcus

62

Chúng ta có thể làm cho nó đơn giản như dưới đây

<input type="number"  onkeydown="javascript: return event.keyCode == 69 ? false : true" />

Cập nhật câu trả lời

chúng ta có thể làm cho nó đơn giản hơn nữa như @ 88 MPG gợi ý

<input type="number" onkeydown="return event.keyCode !== 69" />


17
Tốt hơn để sử dụng return event.keyCode !== 69vì nó tránh một toán tử ternary không cần thiết. Cũng sẽ không đề nghị nội tuyến.
Adam Fratino

5
Điều này không ngăn chặn việc sao chép ehoặc Etrong lĩnh vực này
molamk

18

Loại số đầu vào HTML cho phép "e / E" vì "e" là viết tắt của số mũ là ký hiệu số.

Ví dụ 200000 cũng có thể được viết là 2e5. Tôi hy vọng điều này sẽ giúp cảm ơn bạn cho câu hỏi.          


12

Cách tốt nhất để buộc chỉ sử dụng một số gồm các chữ số:

<input type="number" onkeydown="javascript: return event.keyCode === 8 ||
event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

điều này tránh 'e', ​​'-', '+', '.' ... Tất cả các ký tự không phải là số!

Để chỉ cho phép các phím số:

isNaN (Số (event.key))

nhưng chấp nhận "Backspace" (keyCode: 8) và "Xóa" (keyCode: 46) ...


11
<input type="number" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)"  >

function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;

    isNotWanted = (keyCode == 69 || keyCode == 101);
    return !isNotWanted;
};
function handlePaste (e) {
    var clipboardData, pastedData;

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();

    if(pastedData.indexOf('E')>-1) {
        //alert('found an E');
        e.stopPropagation();
        e.preventDefault();
    }
};

2
Bạn tự tin đến mức nào khi điều này sẽ ngăn việc chèn ký tự 'E' với chức năng sao chép và dán?
StephenKelzer

1
Chỉ cần kiểm tra, bạn đã đúng, nó không hoạt động để sao chép và dán đầu vào.
Gnarlywhale

Bạn đúng @StephenKelzer. Tôi đã thêm mã để xử lý đó.
TruthSeeker

4

Để ẩn cả chữ evà dấu trừ, -chỉ cần đi:

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"

3

Sử dụng góc, Bạn có thể làm điều này để hạn chế nhập e, +, -, E

 <input type="number"  (keypress)="numericOnly($event)"/>


  numericOnly(event): boolean { // restrict e,+,-,E characters in  input type number
    debugger
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode == 101 || charCode == 69 || charCode == 45 || charCode == 43) {
      return false;
    }
    return true;

  }

2
Điều này sẽ hạn chế người dùng nhập ký tự đó ??
Amy

1
cảm ơn vì sự giúp đỡ tôi đã tìm kiếm giải pháp tương tự trong góc nhưng bây giờ tôi có ý tưởng làm thế nào, tôi sẽ tạo ra chỉ thị và hoàn thành nhiệm vụ cảm ơn cho bài đăng của bạn
Amy

bạn có thể tạo ra chỉ thị đó là thực tiễn tốt nhất. cũng như bạn cũng có thể làm trực tiếp trong tập tin .ts của thành phần của bạn!
rinku Choudhary

0

Góc cạnh; với IDE keyCode cảnh báo không dùng nữa

Về mặt chức năng giống như câu trả lời của rinku nhưng với phòng ngừa cảnh báo IDE

numericOnly(event): boolean {
    // noinspection JSDeprecatedSymbols
    const charCode = (event.which) ? event.which : event.key || event.keyCode;  // keyCode is deprecated but needed for some browsers
    return !(charCode === 101 || charCode === 69 || charCode === 45 || charCode === 43);
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.