Cách dễ nhất để che dấu các ký tự trong nhập văn bản HTML (5)

Question

HTML5 có loại mặt nạ văn bản nào hay tôi vẫn phải bẫy onkeydown, v.v ...?

jbabey là đúng - "che" như trong việc chặn một số ký tự không hợp lệ, không ẩn nội dung được nhập.

Cách tốt nhất (như đơn giản nhất và đáng tin cậy nhất) mà tôi tìm thấy là bẫy onkeyup và sau đó chỉ chạy một regex thay thế trên giá trị của trường văn bản, xóa mọi ký tự không hợp lệ.

này có một vài ưu điểm:

1. Thật dễ dàng để thực hiện (một chức năng, hai dòng code).
2. Đáng tin cậy và bao gồm tất cả các trường hợp tôi đã nghĩ đến.
3. Nó không chặn các lệnh chính như sao chép/dán, chọn tất cả hoặc phím mũi tên.

Nhưng nhược điểm chính của nó là nó cho thấy các ký tự đã nhập một thời gian ngắn trước khi loại bỏ chúng, làm cho nó trông rất hackish và không chuyên nghiệp.

Answer 1

Tra cứu HTML5 Input Types mới. Các hướng dẫn này hướng dẫn các trình duyệt thực hiện lọc dữ liệu phía máy khách, nhưng việc triển khai không hoàn chỉnh trên các trình duyệt khác nhau. Thuộc tính pattern sẽ thực hiện lọc theo kiểu regex, nhưng, một lần nữa, các trình duyệt không hoàn toàn (hoặc không) hỗ trợ nó.

Tuy nhiên, những điều này sẽ không tự chặn chính sách nhập, nó sẽ đơn giản ngăn việc gửi biểu mẫu với dữ liệu không hợp lệ. Bạn vẫn sẽ cần phải nắm bắt sự kiện onkeydown để chặn thông tin nhập chính trước khi hiển thị trên màn hình.

Answer 2

Có, theo bản nháp HTML5, bạn có thể sử dụng thuộc tính pattern để chỉ định đầu vào được phép bằng cụm từ thông dụng. Đối với một số loại dữ liệu, bạn có thể sử dụng các trường nhập đặc biệt như <input type=email>. Nhưng những tính năng này vẫn thiếu hỗ trợ hoặc có hỗ trợ về chất lượng kém.

Answer 3

1. xác nhận cơ bản có thể được thực hiện bằng cách chọn loại thuộc tính của các yếu tố đầu vào. Ví dụ: <input type="email" /> <input type="URL" /> <input type="number" />

2. sử dụng mẫu thuộc tính như: <input type="text" pattern="[1-4]{5}" />

3. cần thuộc tính <input type="text" required />

4. maxlength: <input type="text" maxlength="20" />

5. phút & max: <input type="number" min="1" max="4" />

Answer 4

Một chút muộn, nhưng một plugin hữu ích mà sẽ thực sự sử dụng một mặt nạ để cung cấp cho hạn chế hơn một chút trên người dùng nhập vào.Thông tin

<div class="col-sm-3 col-md-6 col-lg-4"> 
    <div class="form-group"> 
    <label for="addPhone">Phone Number *</label> 
     <input id="addPhone" name="addPhone" type="text" class="form-control 
     required" data-mask="(999) 999-9999"placeholder> 
    <span class="help-block">(999) 999-9999</span> 
    </div> 
</div> 

<!-- Input Mask --> 
<script src="js/plugins/jasny/jasny-bootstrap.min.js"></script> 

Thông tin thêm về các plugin http://www.jasny.net/bootstrap/javascript/#inputmask