Hướng dẫn restrict characters in input field html - hạn chế các ký tự trong trường đầu vào html

Question

Làm thế nào chúng ta có thể hạn chế một ký tự để nhập hộp văn bản.

hỏi ngày 17 tháng 6 năm 2010 lúc 7:08Jun 17, 2010 at 7:08

1

Bạn có thể làm điều này thông qua JavaScript (vì vậy nếu JavaScript tắt, bạn sẽ không thể hạn chế nó)

<input type="text" onkeyup="this.value = this.value.replace(/[^a-z]/, '')" />

Điều này sẽ giới hạn nó ở chỉ các ký tự A-Z. Kiểm tra các biểu thức thường xuyên để xem những gì bạn có thể làm

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 7:14Jun 17, 2010 at 7:14

Ben Roweben RoweBen Rowe

Phù bằng vàng 27,9K654 Huy hiệu bạc73 Huy hiệu đồng6 gold badges54 silver badges73 bronze badges

2

Mặc dù vẫn có thể, với HTML5, không cần phải sử dụng giải pháp dựa trên JavaScript cho yêu cầu này.

<input type="text" name="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"> sẽ hạn chế các ký tự được phép theo mẫu REGEXP đó (trong trường hợp này: Địa chỉ email trông hợp lệ).

Thuộc tính title sẽ được sử dụng làm cảnh báo / thông báo khi người dùng cố gắng gửi dữ liệu không khớp với yêu cầu.

<form action="/add_country.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

Xem tài liệu về phần tử đầu vào HTML để biết thêm thông tin. Không phải tất cả các trình duyệt đều hỗ trợ nó tốt như nhau (như Safari) mặc dù.

Đã trả lời ngày 21 tháng 3 năm 2017 lúc 13:51Mar 21, 2017 at 13:51

1

Nếu bạn có hộp văn bản thì bạn phải xử lý sự kiện onkeypress

<input type='text' onkeypress='keypresshandler(event)' />

Bạn có thể sử dụng chức năng sau để hạn chế người dùng

    function keypresshandler(event)
    {
         var charCode = event.keyCode;
         //Non-numeric character range
         if (charCode > 31 && (charCode < 48 || charCode > 57))
         return false;
    }

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 7:13Jun 17, 2010 at 7:13

PurupuruPuru

8.63326 Huy hiệu vàng69 Huy hiệu bạc90 Huy hiệu Đồng26 gold badges69 silver badges90 bronze badges

1

Câu trả lời của Ben Rowe thực sự là cách để tiếp cận nó. Tuy nhiên, ký tự sẽ xuất hiện trong hộp văn bản trước khi nó bị xóa. Bạn có thể ngăn chặn điều đó bằng cách sử dụng

<form action="/add_country.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

0 thay vì

<form action="/add_country.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

1:

<input type="text" oninput="this.value = this.value.replace(/[^a-z]/, '')" />

Đã trả lời ngày 26 tháng 10 năm 2017 lúc 17:46Oct 26, 2017 at 17:46

JW PJW pJW P

13310 Huy hiệu đồng10 bronze badges

   function isNumberKey1(evt)
{
       var charCode = (evt.which) ? evt.which : event.keyCode;
      if ( char!=8(charCode < 65 || charCode > 106))
         return false;

         return true;
}

Đã trả lời ngày 29 tháng 5 năm 2013 lúc 9:25May 29, 2013 at 9:25

Raman Singhraman SinghRaman Singh

1513 Huy hiệu bạc16 Huy hiệu Đồng3 silver badges16 bronze badges

1

Thẻ HTML được sử dụng để nhận đầu vào của người dùng trong HTML. Để đưa ra giới hạn cho trường đầu vào, hãy sử dụng các thuộc tính tối thiểu và tối đa, đó là chỉ định giá trị tối đa và tối thiểu cho trường đầu vào tương ứng.

Để giới hạn số lượng ký tự, hãy sử dụng thuộc tính MaxLpt & NBSP; Các thuộc tính tối đa và tối thiểu được sử dụng với số, phạm vi, ngày, datetime, datetime-local, tháng, thời gian và tuần đầu vào.

Thí dụ

Bạn có thể cố gắng chạy mã sau để giới hạn số lượng ký tự được phép trong trường văn bản đầu vào biểu mẫu:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML maxlength attribute</title>
   </head>
   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         Student Name:
         <br>
         <input type = "text" name = "first_name" value = "" maxlength = "40" />
         <br>
         Student Subject: <br>
         <input type = "text" name = "last_name" value = "" maxlength = "30" />
         <br>
         <input type = "submit" value ="Submit" />
      </form>
   </body>
</html>

Cập nhật vào ngày 14-tháng 5 năm 2020 07:55:16

Câu hỏi và câu trả lời liên quan
Làm thế nào để giới hạn số lượng ký tự được nhập trong TextArea ở dạng HTML?
Làm thế nào để đưa ra một giới hạn cho trường đầu vào trong HTML?
Làm thế nào để giới hạn độ dài văn bản đầu vào bằng CSS3?
Làm thế nào để giới hạn số lượng ký tự được trả lại từ một trường trong một MongoDB?
Những nhân vật nào không được phép trong tên trường MongoDB?
Làm thế nào để giới hạn số lượng ký tự được trả lại từ một trường trong truy vấn MongoDB?
Thuộc tính mẫu văn bản đầu vào html dom
Giới hạn số lượng giá trị trong một trường sử dụng MongoDB?
Giới hạn số lượng giá trị trong một trường với MongoDB?
Làm thế nào chúng ta có thể giới hạn số lượng ký tự bên trong JTextField trong Java?
Làm thế nào để chúng ta thêm số lượng ký tự tối đa được phép trong một phần tử trong HTML?
Truy xuất 40 ký tự đầu tiên của trường văn bản trong MySQL?
Làm thế nào để hạn chế độ dài văn bản của EditText trong Android?
Thuộc tính Số đầu vào HTML DOM
Phát hiện phím Enter trong trường đầu vào văn bản với JavaScript