Hướng dẫn how to restrict keyboard input in javascript - cách hạn chế đầu vào bàn phím trong javascript

Làm cách nào để giới hạn người dùng nhập bất kỳ dữ liệu nào từ bàn phím sang hộp văn bản. Trên thực tế, yêu cầu của tôi là, hộp văn bản cụ thể này đang được sử dụng cho mục đích quét. Do đó, chỉ có dữ liệu được quét sẽ được nhập vào hộp văn bản này và muốn hạn chế bất kỳ dữ liệu được nhập thủ công từ bàn phím.

Hỏi ngày 9 tháng 8 năm 2013 lúc 5:33Aug 9, 2013 at 5:33

1

Chỉ cần vô hiệu hóa hộp văn bản và nhận giá trị từ phần phụ trợ sẽ giải quyết vấn đề.

Đã trả lời ngày 9 tháng 8 năm 2013 lúc 5:38Aug 9, 2013 at 5:38

Mẫu fiddle

Tôi không nghĩ rằng có bất kỳ nhu cầu của JavaScript ở đây.

Chỉ cần sử dụng READOnly trong bạn HTML.readonly in you html.

 

Đó là nó. Không cần JavaScript ưa thích.

Đã trả lời ngày 9 tháng 8 năm 2013 lúc 5:49Aug 9, 2013 at 5:49

Hira Thakurhira ThakurHIRA THAKUR

16.7K14 Huy hiệu vàng53 Huy hiệu bạc84 Huy hiệu đồng14 gold badges53 silver badges84 bronze badges

Thử cái này

$[function[]{
   $['input[type=text]'].bind['keyup keydown keypress', function [evt] {
       return false;
   }];
}];

Thử nghiệm

Đã trả lời ngày 9 tháng 8 năm 2013 lúc 5:36Aug 9, 2013 at 5:36

AmitamitAmit

15.2k8 Huy hiệu vàng45 Huy hiệu bạc68 Huy hiệu Đồng8 gold badges45 silver badges68 bronze badges

2

Nếu bạn muốn điền dữ liệu từ phụ trợ thì bạn có thể vô hiệu hóa vĩnh viễn cho điều đó bạn chỉ cần thêm vào HTML HTML một cách đọc và sau đó điền vào giá trị bằng cách

document.getElementById["yourtextbox_id"].value="your_scanned_value";

Đã trả lời ngày 9 tháng 8 năm 2013 lúc 5:51Aug 9, 2013 at 5:51

AnupanupAnup

3.2351 Huy hiệu vàng27 Huy hiệu bạc37 Huy hiệu đồng1 gold badge27 silver badges37 bronze badges

5

Vào ngày 17 tháng 9 năm 2002, 12:00 AM PDT September 17, 2002, 12:00 AM PDT

Hạn chế đầu vào bàn phím với JavaScript nhanh chóng và dễ dàng này

Sử dụng JavaScript phía máy khách này để xác nhận dữ liệu mà người dùng nhập vào các trường. Bạn có thể tải xuống một mẫu mẫu để xem tập lệnh hoạt động.

Người dùng cuối cảm thấy thất vọng khi họ nhập dữ liệu không phù hợp vào một trường [chẳng hạn như dữ liệu ký tự trong một đối tượng văn bản số] và donith tìm hiểu về nó cho đến khi họ gửi biểu mẫu. Nhưng bằng cách hạn chế đầu vào bàn phím, bạn có thể tắt loại tăng nặng này. Ở đây, một JavaScript tương đối đơn giản cho người dùng biết khi họ đã nhập sai loại dữ liệu.

CodeI quyết định phá vỡ nhiệm vụ hạn chế đầu vào bàn phím thành hai phần. Phần đầu tiên xác định đầu vào hợp lệ, trong khi phần thứ hai kiểm tra đầu vào bàn phím so với danh sách đầu vào hợp lệ và phát hành thông báo lỗi, nếu muốn, nếu một mục không hợp lệ.
I decided to break the task of restricting keyboard input into two parts. The first part defines the valid input, while the second part checks keyboard input against the list of valid input and issues an error message, if desired, if an entry is invalid.

Tôi quyết định sử dụng một lớp JavaScript có tên Keybedit để xử lý nhiệm vụ xác định đầu vào bàn phím hợp lệ. Những lý do cho điều này là rất nhiều. Một thể hiện của lớp này có thể chứa cả ký tự hợp lệ và thông báo lỗi. Ngoài ra, lớp sẽ cho phép tôi xác định một thể hiện cho từng loại đầu vào. Ví dụ, một thể hiện số của lớp Keybedit sẽ cho phép từ 0 đến 9, một phiên bản alpha sẽ chỉ cho phép A qua Z và một phiên bản chữ và số sẽ cho phép cả đầu vào alpha và số. Thông báo lỗi tùy chọn chỉ đơn giản là cung cấp thông tin người dùng về loại đầu vào cần thiết.

Một mẫu mẫu ở đây để lấy mã cho biểu mẫu HTML mẫu với JavaScript.

Click here to grab the code for a sample HTML form with the JavaScript.

Liệt kê A & NBSP; Cung cấp một điểm khởi đầu hợp lý để hạn chế đầu vào. Nhưng không có lý do gì để dừng lại ở đó, Key Keybdecimal cho phép đầu vào số với một điểm thập phân và keybdate cho phép đầu vào số với dấu gạch chéo. Và tất nhiên những ví dụ này được viết bằng đá. Chẳng hạn, nếu một thông báo lỗi không được yêu cầu cho một đối tượng văn bản số, chỉ cần thay đổi keybnumeric thành var keybnumeric = new keybedit [‘01234567890,] ;. Bạn có thể thao tác lớp Keyedit để phù hợp với mục đích của riêng bạn.  provides a reasonable starting point for restricting input. But there is no reason to stop there—keybDecimal allows for numeric input with a decimal point, and keybDate allows for numeric input with a slash. And of course these examples aren’t written in stone. For instance, if an error message isn’t required for a numeric text object, just change keybNumeric to var keybNumeric = new keybEdit[‘01234567890’];. You can manipulate the keyEdit class to suit your own purposes.

Khi các phiên bản cần thiết của lớp Keybedit được tạo, đã đến lúc tiến hành bước tiếp theo, được xử lý bởi chức năng JavaScript editKeyboard. Mục đích của EditKeyboard là so sánh khóa hiện đang được nhấn với danh sách các khóa hợp lệ từ lớp Keybedit. Nếu khóa được tìm thấy trong danh sách, không có hành động nào được thực hiện và đầu vào xuất hiện trong đối tượng văn bản. Tuy nhiên, nếu khóa không được tìm thấy trong danh sách, thông báo lỗi từ lớp Keybedit sẽ được hiển thị và sự kiện bị hủy, dẫn đến phím kế không xuất hiện trong đối tượng văn bản. Điều duy nhất còn lại là đặt một trình xử lý sự kiện cho đối tượng văn bản.

Sự kiện xử lý những điều tuyệt vời về việc viết các ứng dụng dựa trên trình duyệt là bạn có thể sử dụng trình xử lý sự kiện phía máy khách cho các đối tượng khác nhau trên một trang. Đây cũng có thể là vấn đề với việc viết các ứng dụng dựa trên trình duyệt, vì nhiều trình xử lý sự kiện có thể có phần áp đảo. Ví dụ: ba trình xử lý sự kiện có thể có sẵn để hạn chế đầu vào bàn phím cho một phần tử văn bản: Onkeydown, Onkeyup và OnkeyPress. Bạn nên sử dụng cái nào? Tôi thích sử dụng trình xử lý sự kiện OnkeyPress vì nó trả về [Control] C dưới dạng Control-C, thay vì điều khiển và C riêng biệt. Trình xử lý sự kiện OnkeyPress cũng có thêm lợi ích của việc bỏ qua các khóa như [Tab], [xóa] và [Caps Lock].
One of the great things about writing browser-based applications is that you can use client-side event handlers for the various objects on a page. This can also be the problem with writing browser-based applications, since the wide variety of event handlers can be somewhat overwhelming. For example, three possible event handlers are available for restricting keyboard input for a text element: onKeyDown, onKeyUp, and onKeyPress. Which one should you use? I prefer using the onKeyPress event handler because it returns [Control]C as control-c, instead of control and c separately. The onKeyPress event handler also has the added benefit of ignoring keys like [Tab], [Delete], and [Caps Lock].

Hãy bắt đầu với một hộp văn bản HTML có tên TXTCienDate:

Nhấn khóa không hợp lệ tạo ra thông báo được hiển thị trong Hình A, trong khi khóa hợp lệ được chấp nhận và không tạo thông báo lỗi.Figure A, while a valid key is accepted and produces no error message.

Hình a
Hộp thoại Thông báo lỗi

Ví dụ này hoạt động hoàn hảo miễn là txtCienDate là một hộp văn bản HTML. Một cách tiếp cận hơi khác nhau là bắt buộc nếu TXTCienDate là điều khiển thời gian thiết kế [DTC] trong phát triển trang Active Server [ASP]. DTC giúp cuộc sống dễ dàng hơn khi xử lý các vấn đề về phía máy chủ, nhưng ở phía máy khách, việc triển khai không rõ ràng vì trình xử lý sự kiện phải được đặt trên tải trang.

Để đặt trình xử lý sự kiện OnKeyPress, hãy thêm mã sau vào thẻ cơ thể HTML:

Điều này có kết quả cuối cùng với đoạn trích trên, nhưng nó hoạt động với hộp văn bản DTC hoặc HTML.

Việc trả tiền mà người dùng dữ liệu có thể nhập vào một biểu mẫu làm giảm sự thất vọng do các mục không hợp lệ. Nó cũng giúp bảo vệ tính toàn vẹn của dữ liệu được thu thập.
Validating the data users can enter in a form reduces the frustration caused by invalid entries. It also helps protect the integrity of the data collected.

  • Phần cứng

Bài Viết Liên Quan

Chủ Đề