Hướng dẫn how do you control input type number in html? - làm cách nào để bạn kiểm soát số loại đầu vào trong html?

Thử nó

Trên các trình duyệt không hỗ trợ đầu vào loại

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="Multiple of 10" />

Giá trị

A

<input type="text" inputmode="numeric" pattern="\d*" />

<input id="number" type="number" value="42" />

Sự kiện

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label> <input id="ticketNum" type="number" name="ticketNum" value="0" /> 3

Được hỗ trợ các thuộc tính chung

<input type="number" placeholder="multiple of 10" step="10" /> 1

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Thuộc tính IDL

<input type="number" placeholder="multiple of 10" step="10" /> 4

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Giao diện DOM

<label for="ticketNum">Number of tickets you would like to buy:</label> <input id="ticketNum" type="number" name="ticketNum" value="0" /> 4

Phương pháp

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="Multiple of 10" />

Một số đại diện cho giá trị của số được nhập vào đầu vào. Bạn có thể đặt giá trị mặc định cho đầu vào bằng cách bao gồm một số bên trong thuộc tính

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Thuộc tính bổ sung

Ngoài các thuộc tính thường được hỗ trợ bởi tất cả các loại

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Các giá trị của thuộc tính danh sách là

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="multiple of 10" step="10" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" /> 8

Giá trị tối đa để chấp nhận cho đầu vào này. Nếu

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="multiple of 10" step="10" />

Giá trị này phải lớn hơn hoặc bằng giá trị của thuộc tính

<input type="number" placeholder="multiple of 10" step="10" />

Giá trị tối thiểu để chấp nhận cho đầu vào này. Nếu

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="multiple of 10" step="10" />

Giá trị này phải nhỏ hơn hoặc bằng giá trị của thuộc tính

<input type="number" placeholder="multiple of 10" step="10" />

Thuộc tính <label for="ticketNum">Number of tickets you would like to buy:</label> <input id="ticketNum" type="number" name="ticketNum" value="0" /> 4 là một chuỗi cung cấp một gợi ý ngắn gọn cho người dùng về loại thông tin được mong đợi trong trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện loại dữ liệu dự kiến, thay vì một thông điệp giải thích. Văn bản không được bao gồm trả lại vận chuyển hoặc nguồn cấp dữ liệu.

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần trình bày trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán nhị phân Unicode để ghi đè tính định hướng trong trình giữ chỗ; Xem cách sử dụng các điều khiển Unicode cho văn bản BIDI để biết thêm thông tin.

<input type="text" inputmode="numeric" pattern="\d*" />

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input type="number" placeholder="multiple of 10" step="10" />

<input type="text" inputmode="numeric" pattern="\d*" />

CẢNH BÁO: Về mặt logic, bạn không thể nhập các ký tự bên trong một số nhập khác với các số. Một số trình duyệt cho phép các ký tự không hợp lệ, những người khác thì không; Xem Bug & NBSP; 1398528. Logically, you should not be able to enter characters inside a number input other than numbers. Some browsers allow invalid characters, others do not; see bug 1398528.

Lưu ý: Người dùng có thể sửa đổi HTML của bạn ở hậu trường, vì vậy trang web của bạn không được sử dụng xác thực phía máy khách đơn giản cho bất kỳ mục đích bảo mật nào. Bạn phải xác minh ở phía máy chủ bất kỳ giao dịch nào trong đó giá trị được cung cấp có thể có ý nghĩa bảo mật của bất kỳ loại nào. A user can tinker with your HTML behind the scenes, so your site must not use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have security implications of any kind.

Trình duyệt di động giúp đỡ thêm với trải nghiệm người dùng bằng cách hiển thị bàn phím đặc biệt phù hợp hơn để nhập các số khi người dùng cố gắng nhập giá trị.

Một số đầu vào đơn giản

Ở dạng cơ bản nhất, một đầu vào có thể được thực hiện như thế này:

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Một đầu vào số được coi là hợp lệ khi trống và khi một số được nhập, nhưng nếu không thì không hợp lệ. Nếu thuộc tính

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

Người giữ chỗ

Đôi khi, thật hữu ích khi cung cấp một gợi ý trong bối cảnh về những gì hình thành dữ liệu đầu vào nên lấy. Điều này có thể đặc biệt quan trọng nếu thiết kế trang không cung cấp nhãn mô tả cho mỗi

<input type="text" inputmode="numeric" pattern="\d*" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

Ở đây, chúng tôi có đầu vào

<input type="text" inputmode="numeric" pattern="\d*" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

<input type="number" placeholder="Multiple of 10" />

Kiểm soát kích thước bước

Theo mặc định, các nút lên và xuống được cung cấp cho bạn để bước số lên và xuống sẽ tăng giá trị lên và xuống 1. Bạn có thể thay đổi điều này bằng cách cung cấp thuộc tính

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

<input type="number" placeholder="multiple of 10" step="10" />

Trong ví dụ này, bạn nên thấy rằng các mũi tên bước lên và xuống sẽ tăng và giảm giá trị xuống 10 mỗi lần, chứ không phải 1. Bạn vẫn có thể nhập thủ công một số không phải là bội số của 10, nhưng nó sẽ được coi là không hợp lệ.

Chỉ định các giá trị tối thiểu và tối đa

Bạn có thể sử dụng các thuộc tính

<input type="number" placeholder="multiple of 10" step="10" />

<input type="number" placeholder="multiple of 10" step="10" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

Trong phiên bản cập nhật này, bạn nên thấy rằng các nút bước lên và xuống sẽ không cho phép bạn đi dưới 0 hoặc trên 100. Bạn vẫn có thể nhập thủ công một số bên ngoài các giới hạn này, nhưng nó sẽ được coi là không hợp lệ.

Cho phép các giá trị thập phân

Một vấn đề với đầu vào số là kích thước bước của chúng là 1 theo mặc định. Nếu bạn cố gắng nhập một số với số thập phân (chẳng hạn như "1.0"), nó sẽ được coi là không hợp lệ. Nếu bạn muốn nhập một giá trị yêu cầu số thập phân, bạn sẽ cần phải phản ánh điều này trong giá trị

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Xem ví dụ này cho phép bất kỳ giá trị nào giữa

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

Kiểm soát kích thước đầu vào

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

Ví dụ, để điều chỉnh chiều rộng của đầu vào chỉ rộng khi cần nhập số ba chữ số, chúng tôi có thể thay đổi HTML của mình để bao gồm

<input type="number" placeholder="Multiple of 10" />

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

Sau đó, chúng tôi thêm một số CSS để thu hẹp chiều rộng của phần tử với bộ chọn

<input type="number" placeholder="Multiple of 10" />

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

Kết quả trông như thế này:

Cung cấp các giá trị đề xuất

Bạn có thể cung cấp một danh sách các tùy chọn mặc định mà người dùng có thể chọn bằng cách chỉ định thuộc tính

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="Multiple of 10" />

<input type="number" placeholder="Multiple of 10" />

<input type="text" inputmode="numeric" pattern="\d*" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

Thẩm định

Chúng tôi đã đề cập đến một số tính năng xác nhận của các đầu vào

<input type="text" inputmode="numeric" pattern="\d*" />

• <input
    type="number"
    placeholder="x10"
    step="10"
    min="0"
    max="100"
    id="number" />
  

  3 Các yếu tố tự động vô hiệu hóa bất kỳ mục nào không phải là số (hoặc trống, trừ khi

  <input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
  

  6 được chỉ định).
• Bạn có thể sử dụng thuộc tính

  <input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
  

  6 để làm cho một mục trống không hợp lệ. (Nói cách khác, đầu vào phải được điền vào.)
• Bạn có thể sử dụng thuộc tính

  <input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
  

  8 để ràng buộc các giá trị hợp lệ vào một tập hợp nhất định (ví dụ: bội số của 10).
• Bạn có thể sử dụng các thuộc tính

  <input type="number" placeholder="multiple of 10" step="10" />
  

  4 và

  <input type="number" placeholder="multiple of 10" step="10" />
  

  1 để hạn chế các giá trị hợp lệ với giới hạn dưới và trên.

Ví dụ sau đây thể hiện tất cả các tính năng trên, cũng như sử dụng một số CSS để hiển thị các biểu tượng hợp lệ và không hợp lệ, tùy thuộc vào giá trị của ____ 21:

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

Hãy thử gửi biểu mẫu với các giá trị không hợp lệ khác nhau được nhập - ví dụ: không có giá trị; giá trị dưới 0 hoặc trên 100; một giá trị không phải là bội số của 10; hoặc một giá trị phi hình số-và xem cách các thông báo lỗi mà trình duyệt cung cấp cho bạn khác nhau với các thông báo khác nhau.

CSS áp dụng cho ví dụ này như sau:

<input type="text" inputmode="numeric" pattern="\d*" />

Ở đây chúng tôi sử dụng các lớp giả

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Chúng tôi đặt nó trên một phần tử

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Cảnh báo: Xác thực biểu mẫu HTML không phải là một thay thế cho các tập lệnh phía máy chủ đảm bảo rằng dữ liệu đã nhập ở định dạng thích hợp! HTML form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format!

Thật dễ dàng để ai đó thực hiện các điều chỉnh cho HTML cho phép họ bỏ qua việc xác thực hoặc loại bỏ nó hoàn toàn. Ai đó cũng có thể bỏ qua HTML của bạn và gửi dữ liệu trực tiếp đến máy chủ của bạn.

Nếu mã phía máy chủ của bạn không xác thực dữ liệu mà nó nhận được, thảm họa có thể tấn công khi dữ liệu được định dạng không đúng cách được gửi (hoặc dữ liệu quá lớn, là loại sai, v.v.).

Xác thực mẫu

Các yếu tố

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input type="text" inputmode="numeric" pattern="\d*" />

Lý do cho điều này là các đầu vào số sẽ không hợp lệ nếu chúng chứa bất cứ thứ gì ngoại trừ các số và bạn có thể hạn chế số chữ số hợp lệ tối thiểu và tối đa bằng cách sử dụng các thuộc tính

<input type="number" placeholder="multiple of 10" step="10" />

<input type="number" placeholder="multiple of 10" step="10" />

Ví dụ

Chúng tôi đã đề cập đến thực tế là theo mặc định, mức tăng là

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

Trong ví dụ sau là một hình thức để nhập chiều cao của người dùng. Nó mặc định chấp nhận chiều cao tính bằng mét, nhưng bạn có thể nhấp vào nút liên quan để thay đổi biểu mẫu để chấp nhận chân và inch thay thế. Đầu vào cho chiều cao tính bằng mét chấp nhận số thập phân đến hai nơi.

HTML trông như thế này:

<input type="text" inputmode="numeric" pattern="\d*" />

Bạn sẽ thấy rằng chúng tôi đang sử dụng nhiều thuộc tính mà chúng tôi đã xem trong bài viết trước đó. Vì chúng tôi muốn chấp nhận giá trị đồng hồ tính theo centimet, chúng tôi đã đặt giá trị

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<input type="text" inputmode="numeric" pattern="\d*" />

Chúng tôi đã ẩn đầu vào chân và inch ban đầu bằng cách sử dụng

<input type="text" inputmode="numeric" pattern="\d*" />

Bây giờ, vào CSS. Điều này trông rất giống với kiểu dáng xác nhận mà chúng ta đã thấy trước đây; Không có gì đáng chú ý ở đây.

<input type="text" inputmode="numeric" pattern="\d*" />

Và cuối cùng, JavaScript:

<input type="text" inputmode="numeric" pattern="\d*" />

Sau khi khai báo một vài biến, người nghe sự kiện được thêm vào

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

(Lưu ý rằng chúng tôi không chuyển đổi qua lại giữa mét và feet/inch ở đây, mà một ứng dụng web ngoài đời thực có thể sẽ làm.)

Lưu ý: Khi người dùng nhấp vào nút, (các) thuộc tính

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Nếu bạn không làm điều này, bạn sẽ phải điền vào cả hai feet/inch và mét để gửi biểu mẫu!and meters to submit the form!

Khả năng tiếp cận

Vai trò ngầm cho phần tử

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

Đồng thời xem xét sử dụng thuộc tính

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="text" inputmode="numeric" pattern="\d*" />

Xem thêm