Javascript thêm số từ đầu vào

Question

Phần tử

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

5 kiểu

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

6 được sử dụng để cho phép người dùng nhập một số. Chúng bao gồm xác thực tích hợp để từ chối các mục nhập không phải là số

Nội dung chính Show

thuộc tính bổ sung
Number of tickets you would like to buy: 4
72
75
Number of tickets you would like to buy: 5
Number of tickets you would like to buy: 6
39
Sử dụng đầu vào số
Nhập số đơn giản
Trình giữ chỗ
Kiểm soát kích thước bước
Chỉ định giá trị tối thiểu và tối đa
Cho phép giá trị thập phân
Kiểm soát kích thước đầu vào
Cung cấp các giá trị được đề xuất
Thẩm định
xác thực mẫu
khả năng tiếp cận
Làm cách nào tôi có thể thêm hai số trong JavaScript bằng cách sử dụng đầu vào từ người dùng trong HTML?
Có chức năng tính tổng trong JavaScript không?
Bạn có thể thêm một số vào một biến JavaScript không?
Làm cách nào để cộng hai số mà không cần sử dụng toán tử trong JavaScript?

Trình duyệt có thể chọn cung cấp các mũi tên theo bước để cho phép người dùng tăng và giảm giá trị bằng chuột hoặc bằng cách chạm bằng đầu ngón tay

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

6, đầu vào

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

6 sẽ chuyển về loại

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

9

Giá trị A

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

0 đại diện cho một số hoặc các sự kiện trống

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

1 và

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

2Các thuộc tính chung được hỗ trợ

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

3,

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

4,

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

5,

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

6Các thuộc tính IDL

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

4,

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

8,

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

9Giao diện DOM

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

50

Phương pháp ________ 151, ________ 152, ________ 153

Giá trị

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

8, như vậy

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

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

5, đầu vào của loại

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

6 hỗ trợ các thuộc tính này

Number of tickets you would like to buy: 4

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

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

58 của phần tử

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

59 nằm trong cùng một tài liệu.

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

59 cung cấp danh sách các giá trị được xác định trước để đề xuất cho người dùng cho đầu vào này. Bất kỳ giá trị nào trong danh sách không tương thích với

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

71 đều không được đưa vào các tùy chọn được đề xuất. Các giá trị được cung cấp là đề xuất, không phải yêu cầu. người dùng có thể chọn từ danh sách được xác định trước này hoặc cung cấp một giá trị khác

72

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

8 được nhập vào phần tử vượt quá giá trị này, thì phần tử không xác thực được ràng buộc. Nếu giá trị của thuộc tính

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

72 không phải là số thì phần tử đó không có giá trị lớn nhất

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

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

75

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

8 của phần tử nhỏ hơn giá trị này, thì phần tử không xác thực được ràng buộc. Nếu một giá trị được chỉ định cho

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

75 không phải là số hợp lệ, đầu vào không có giá trị tối thiểu

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

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

72

Number of tickets you would like to buy: 5

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

5 là một chuỗi cung cấp 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, chứ không phải là một thông báo giải thích. Văn bản không được bao gồm dấu xuống dòng hoặc xuống dòng

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị 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 hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Note: Avoid using the

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

5 attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input (Form Input) element for more information.

Number of tickets you would like to buy: 6

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

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

8 của nó vẫn có thể được thay đổi bằng mã JavaScript trực tiếp đặt thuộc tính

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

50

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

8

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên

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

37 không có bất kỳ ảnh hưởng nào đối với các đầu vào có 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" />

6 cũng được chỉ định

39

Thuộc tính

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

39 là một số chỉ định mức độ chi tiết mà giá trị phải tuân theo hoặc giá trị đặc biệt

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

71, được mô tả bên dưới. Chỉ các giá trị bằng với cơ sở để bước (

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

75 nếu được chỉ định,

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

8 nếu không, và một giá trị mặc định phù hợp nếu không có giá trị nào được cung cấp) mới hợp lệ

Giá trị chuỗi của

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

71 có nghĩa là không có bước nào được ngụ ý và mọi giá trị đều được phép (không bao gồm các ràng buộc khác, chẳng hạn như

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

75 và

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

72)

Ghi chú. Khi dữ liệu do người dùng nhập không tuân theo cấu hình từng bước, tác nhân người dùng có thể làm tròn đến giá trị hợp lệ gần nhất, ưu tiên các số theo hướng dương khi có hai tùy chọn gần bằng nhau

Giá trị bước mặc định cho đầu vào

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

6 là

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

78, chỉ cho phép nhập số nguyên—trừ khi cơ sở bước không phải là số nguyên

Sử dụng đầu vào số

Loại đầu vào

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

6 chỉ nên được sử dụng cho các số gia tăng, đặc biệt khi việc tăng và giảm nút xoay hữu ích cho trải nghiệm người dùng. Loại đầu vào

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

6 không phù hợp với các giá trị chỉ bao gồm các số nhưng không nói đúng ra là số, chẳng hạn như mã bưu chính ở nhiều quốc gia hoặc số thẻ tín dụng. Đối với đầu vào không phải là số, hãy cân nhắc sử dụng loại đầu vào khác, chẳng hạn như

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

71 hoặc loại

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

5 khác với 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" />

73

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

Phần tử

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

74 có thể giúp đơn giản hóa công việc của bạn khi xây dựng giao diện người dùng và logic để nhập số vào biểu mẫu. Khi bạn tạo đầu vào số với giá trị

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

71 thích hợp,

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

6, bạn sẽ nhận được xác thực tự động rằng văn bản đã nhập là một số và thường là một tập hợp các nút lên và xuống để tăng và giảm giá trị

Cảnh báo. Về mặt logic, bạn sẽ không thể nhập các ký tự bên trong một đầu vào số không phải là số. Một số trình duyệt cho phép các ký tự không hợp lệ, một số khác thì không;

Ghi chú. Người dùng có thể sửa lạ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 dưới bất kỳ hình thức nào

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

Nhập số đơn giản

Ở dạng cơ bản nhất, một đầu vào số có thể được triển khai 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" />

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

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

37 được sử dụng, đầu vào không còn được coi là hợp lệ khi trống

Ghi chú. Bất kỳ số nào cũng là giá trị có thể chấp nhận được, miễn là số đó là số dấu phẩy động hợp lệ (nghĩa là không phải NaN hoặc Infinity)

Trình giữ chỗ

Đôi khi, thật hữu ích khi đưa ra gợi ý trong ngữ cảnh về dạng dữ liệu đầu vào sẽ có. Đ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*" />

5. Đây là nơi giữ chỗ đến. Trình giữ chỗ là một giá trị được sử dụng phổ biến nhất để cung cấp gợi ý về định dạng mà đầu vào sẽ sử dụng

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

8. Nó được hiển thị bên trong hộp chỉnh sửa khi

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

8 của phần tử là

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

91. Khi dữ liệu được nhập vào hộp, trình giữ chỗ sẽ biến mất;

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

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

6 với trình giữ chỗ "

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

93". Lưu ý cách trình giữ chỗ biến mất và xuất hiện lại khi bạn thao tác với nội dung của trường chỉnh sửa

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

5

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 để bạn bước số lên và xuống sẽ bước 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="text" inputmode="numeric" pattern="\d*" />

39, thuộc tính này nhận giá trị của nó là một số chỉ định số lượng bước. Ví dụ trên của chúng tôi chứa một trình giữ chỗ nói rằng giá trị phải là bội số của 10, vì vậy sẽ hợp lý khi thêm giá trị

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

39 của

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

96

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

7

Trong ví dụ này, bạn sẽ 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ị 10 lần 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 số đó sẽ bị coi là không hợp lệ

Chỉ định 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="text" inputmode="numeric" pattern="\d*" />

75 và

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

72 để chỉ định giá trị tối thiểu và tối đa mà trường có thể có. Ví dụ: hãy đưa ra ví dụ của chúng tôi tối thiểu là

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

99 và tối đa là

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

00

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

3

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

Cho phép 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ố có phần thập phân (chẳng hạn như "1. 0"), nó sẽ bị 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 cần phản ánh điều này trong giá trị

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

39 (e. g.

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

02 để cho phép số thập phân đến hai chữ số thập phân). Đây là một ví dụ đơn giản

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

7

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

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

03 và

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

04, với số thập phân đến hai vị trí. Ví dụ: "9. 52" là hợp lệ, nhưng "9. 521" không phải

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

Các phần tử

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

5 thuộc loại

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

6 không hỗ trợ các thuộc tính định cỡ biểu mẫu, chẳng hạn như

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

07. Bạn sẽ phải sử dụng CSS để thay đổi kích thước của các điều khiển này

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

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

58 và để rút ngắn trình giữ chỗ của chúng ta vì trường sẽ quá hẹp đối với văn bản

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

7

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

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

58

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

00

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

9

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

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

Bạn có thể cung cấp 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" />

4, thuộc tính này chứa giá trị của nó là

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

58 của một

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

59, thuộc tính này chứa một phần tử

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

04 cho mỗi giá trị được đề xuất. Mỗi

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

8 của

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

05 là giá trị gợi ý tương ứng cho ô nhập số

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

0

Thẩm định

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

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

6, nhưng bây giờ hãy xem lại chúng

Các phần tử

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

74 tự động làm mất hiệu lực bất kỳ mục nhập nào không phải là số (hoặc trống, trừ khi chỉ định

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

37)

Bạn có thể sử dụng thuộc tính
```
<input type="text" inputmode="numeric" pattern="\d*" />
```
37 để làm cho mục nhập 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="text" inputmode="numeric" pattern="\d*" />
```
39 để hạn chế các giá trị hợp lệ trong một tập hợp các bước nhất định (e. g. , bội số của 10)
Bạn có thể sử dụng các thuộc tính
```
<input type="text" inputmode="numeric" pattern="\d*" />
```
75 và
```
<input type="text" inputmode="numeric" pattern="\d*" />
```
72 để giới hạn các giá trị hợp lệ ở giới hạn trên và dưới

Ví dụ sau 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

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

2

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

0

Hãy thử gửi biểu mẫu với các giá trị không hợp lệ khác được nhập — e. g. , không có giá trị;

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

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

1

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

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

15 và

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

16 để hiển thị một biểu tượng hợp lệ hoặc không hợp lệ thích hợp dưới dạng nội dung được tạo trên phần tử

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

17 liền kề, như một chỉ báo trực quan về tính hợp lệ

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

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

17 riêng biệt để tăng tính linh hoạt. Một số trình duyệt không hiển thị nội dung được tạo rất hiệu quả trên một số loại đầu vào biểu mẫu. (Đọc, ví dụ, phần về xác nhận

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

19. )

Cảnh báo. Xác thực biểu mẫu HTML không 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 phù hợp

Quá dễ dàng để ai đó thực hiện các điều chỉnh đối với HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Cũng có thể ai đó 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 được dữ liệu mà nó nhận được, thảm họa có thể xảy ra khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, không đúng loại, v.v.)

xác thực mẫu

Các phần tử

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

74 không hỗ trợ sử dụng thuộc tính

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

21 để làm cho các giá trị đã nhập tuân theo một mẫu biểu thức chính quy cụ thể

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

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

75 và

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

72 (như đã giải thích ở trên)

ví dụ

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

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

78 và bạn có thể sử dụng thuộc tính

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

39 để cho phép nhập số thập phân. Hãy xem xét kỹ hơn

Trong ví dụ sau đây là một biểu mẫu để 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 có liên quan để thay đổi biểu mẫu để chấp nhận feet 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 vị trí

HTML trông như thế này

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

2

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 xét trong bài viết trước đó. Vì chúng tôi muốn chấp nhận giá trị mét tính bằng centimet, nên chúng tôi đã đặt giá trị

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

39 thành

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

27, để các giá trị như 1. 78 không được coi là không hợp lệ. Chúng tôi cũng đã cung cấp trình giữ chỗ cho đầu vào đó

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

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

28, để mét là loại mục nhập mặc định

Bây giờ, vào CSS. Điều này trông rất giống với kiểu xác thực mà chúng ta đã thấy trước đây;

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

3

Và cuối cùng, JavaScript

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

4

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

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

29 để điều khiển cơ chế chuyển đổi. Điều này khá đơn giản, chủ yếu liên quan đến việc thay đổi

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

30 và

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

31 của nút và cập nhật giá trị hiển thị của hai bộ đầu vào khi nhấn nút

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

Ghi chú. Khi người dùng nhấp vào nút, (các) thuộc tính

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

37 sẽ bị xóa khỏi (các) đầu vào mà chúng tôi đang ẩn và làm trống (các) 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" />

8. Điều này là để biểu mẫu có thể được gửi nếu cả hai bộ đầu vào không được điền vào. Nó cũng đảm bảo rằng biểu mẫu sẽ không gửi dữ liệu mà người dùng không cố ý

Nếu bạn không làm điều này, bạn phải điền cả feet/inch và mét để gửi biểu mẫu

khả năng tiếp cận

Vai trò ẩn của phần tử

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

74 là

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

35. Nếu spinbutton không phải là một tính năng quan trọng để kiểm soát biểu mẫu của bạn, hãy cân nhắc không sử dụng

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

36. Thay vào đó, hãy sử dụng

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

37 cùng với thuộc tính

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

21 giới hạn ký tự thành số và ký tự liên quan. Với

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

74, có nguy cơ người dùng vô tình tăng số khi họ đang cố làm việc khác. Ngoài ra, nếu người dùng cố gắng nhập thứ gì đó không phải là số, sẽ không có phản hồi rõ ràng về những gì họ đang làm sai

Ngoài ra, hãy cân nhắc 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" />

3 để giúp người dùng hoàn thành biểu mẫu nhanh hơn và ít mắc lỗi hơn. Ví dụ: để bật tự động điền trên trường mã zip, hãy đặt

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

41

Làm cách nào tôi có thể thêm hai số trong JavaScript bằng cách sử dụng đầu vào từ người dùng trong HTML?

Đây là mã JavaScript đơn giản nhất để cộng hai số. .

var numOne = 10;

numOne = parseInt(tài liệu. .

tài liệu. .

phong cách = "hiển thị. không ai;"

nhiệt độ. .

Có chức năng tính tổng trong JavaScript không?

hàm sum() trong D3. js dùng để trả về tổng các phần tử của mảng đã cho . Nếu mảng trống thì nó trả về 0. Thông số. Hàm này chấp nhận một tham số Mảng là một mảng các phần tử cần tính tổng.

Bạn có thể thêm một số vào một biến JavaScript không?

Thêm số trong JavaScript bằng cách đặt dấu cộng giữa chúng . Bạn cũng có thể sử dụng cú pháp sau để thực hiện phép cộng. var x+=y; .

Làm cách nào để cộng hai số mà không cần sử dụng toán tử trong JavaScript?

var getSum = function(a, b) { return (a ^ b, (a & b) << 1) };

programming javascript

Javascript thêm số từ đầu vào

Thử nó

Giá trị

thuộc tính bổ sung

Number of tickets you would like to buy: 4

72

75

Number of tickets you would like to buy: 5

Number of tickets you would like to buy: 6

39

Sử dụng đầu vào số

Nhập số đơn giản

Trình giữ chỗ

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

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

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

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

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

Thẩm định

xác thực mẫu

ví dụ

khả năng tiếp cận

Làm cách nào tôi có thể thêm hai số trong JavaScript bằng cách sử dụng đầu vào từ người dùng trong HTML?

Có chức năng tính tổng trong JavaScript không?

Bạn có thể thêm một số vào một biến JavaScript không?

Làm cách nào để cộng hai số mà không cần sử dụng toán tử trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội