Làm cách nào để bạn chỉ nhập các số trong html?
|
Tôi đã xem rất nhiều bài báo và bài đăng về vấn đề này trong vài năm qua và đó là một cách rất hữu ích để hướng dẫn người dùng nhập liệu. Tuy nhiên, vẫn còn quá nhiều triển khai có lỗ hổng, giám sát làm tê liệt và lỗi triển khai Show Khái niệm tổng thể là âm thanh. Sử dụng các thuộc tính HTML 5 để hạn chế những gì có thể được gửi đến máy chủ, sau đó cải thiện nó bằng Javascript để hạn chế những gì người dùng là… Trong HTML, thẻ đầu vào có thể được đặt thành chỉ nhận các đầu vào số bằng cách đặt thuộc tính loại của nó thành số hoặc thành số điện thoại. Tuy nhiên, thực hiện nó thông qua JavaScript sẽ hơi phức tạp một chút Bước 1. Tài liệu HTMLTạo tệp HTML và trong tệp đó, thiết lập trường nhập và một số văn bản yêu cầu người dùng nhập dữ liệu vào trường văn bản với sự trợ giúp của các dòng sau < trung tâm > Trong những dòng này
Chạy trang web HTML bây giờ sẽ cho kết quả như sau trên trình duyệt  Hiện tại, tất cả các loại ký tự có thể được viết bên trong trường văn bản này Nhưng điều này sẽ thay đổi trong phần tiếp theo Bước 2. Thiết lập mã JavaScriptIn the JavaScript file or in the Như vậy là bạn đã hoàn tất việc thiết lập phần JavaScript Bước 3. Kiểm tra trường đầu vàoSau khi bạn hoàn thành bước 1 và bước 2, chỉ cần thực thi tài liệu HTML và thử đặt các giá trị bên trong trường đầu vào và quan sát hành vi của nó Nó hiện chỉ cho phép viết số bên trong nó và bỏ qua các ký tự khác Sự kết luậnĐể hạn chế người dùng chỉ nhập các ký tự số bên trong đầu vào bằng JavaScript. Sau đó, trong trường hợp đó, hãy gọi một hàm trên mọi phím được nhấn bên trong trường nhập đó và trong hàm này, hãy so sánh mã ASCII của phím được nhấn với mã ASCII của các giá trị số. Dựa trên sự so sánh này, hãy cho phép nhập các phím bên trong trường nhập liệu Bài viết này sẽ giới thiệu một số phương pháp để chỉ cho phép nhập số trong trường nhập văn bản trong HTML Sử dụng Click 3 trong thẻ Click 4 để chỉ cho phép nhập số trong HTMLTrong HTML, chúng tôi sử dụng thẻ Chúng tôi có thể chỉ định loại đầu vào với thuộc tính Chúng ta có thể sử dụng thuộc tính Tiếp theo, tạo một nút gửi. Biểu mẫu sẽ không được gửi khi chúng tôi nhập bất kỳ ký tự nào thay vì số Tuy nhiên, hành vi là khác nhau giữa các trình duyệt Trong Firefox, ví dụ bên dưới cho phép mọi đầu vào trong vùng nhập liệu. Nhưng nó không để giá trị được gửi khi nhấp vào nút Trong trường hợp của Chrome, nó không cho phép nhập bất kỳ ký tự nào khác ngoài ký tự số. Firefox cho phép dán các đầu vào khác, nhưng Chrome không cho phép Ví dụ: nếu chúng tôi sao chép một số văn bản ngẫu nhiên và dán văn bản đó vào khu vực nhập liệu trong Firefox, văn bản đó sẽ được dán, nhưng điều này không xảy ra trong Chrome. Hành vi này cũng tương tự khi kéo và thả nội dung vào vùng văn bản Vì vậy, để thêm một số xác thực, chúng tôi có thể vô hiệu hóa thao tác kéo và thả và dán trong vùng văn bản. Chẳng hạn, viết các thuộc tính Bằng cách này, tính năng sao chép-dán và kéo và thả sẽ bị tắt trong vùng văn bản Mã ví dụ Viết xác thực phía máy khách bằng JavaScript để chỉ cho phép nhập số trong HTMLMặc dù phương pháp trên không hoạt động hoàn hảo trong tất cả các trình duyệt, nhưng cần phải thêm một số xác thực phía máy khách để chỉ cho phép nhập các giá trị số trong vùng văn bản. Để làm được điều đó, chúng ta cần viết một số JavaScript Chúng tôi cần thêm xác thực như vậy khi đầu vào từ giá trị Sự kiện Chúng ta có thể sử dụng thuộc tính Ví dụ, viết sự kiện Bên trong thuộc tính trả về câu lệnh Trong ví dụ bên dưới, Đó là cách chúng ta có thể sử dụng sự kiện |
