Hàm JavaScript này sẽ được sử dụng để hạn chế bảng chữ cái và ký tự đặc biệt trong Hộp văn bản, chỉ cho phép các số, xóa, phím mũi tên và xóa lùi
Đoạn mã JavaScript - Cho phép số trong TextBox, hạn chế bảng chữ cái và ký tự đặc biệt
hàm JavaScript
Mã nguồn HTML với JavaScript
JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters). JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters). Enter numbers only:Kết quả
Ví dụ JavaScript »
Tất nhiên, JavaScript sẽ không ngăn những người dùng đã xác định gửi các ký tự mà bạn không muốn, điều đó cần được thực hiện phía máy chủ nếu điều đó quan trọng, nhưng biểu thức chính quy JavaScript có thể đủ tốt cho nhu cầu của bạn
Bạn có muốn hạn chế một số ký tự đặc biệt khỏi trường biểu mẫu không? . Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách hạn chế các ký tự đó bằng Javascript
Thêm JavaScript
Trước tiên, bạn sẽ muốn sao chép đoạn mã này vào trang web của mình. Có hai đoạn dưới đây, một đoạn dành cho các trường biểu mẫu nhập liệu cơ bản và đoạn thứ hai dành cho trường biểu mẫu Văn bản Đoạn văn
Nếu bạn cần bất kỳ trợ giúp nào về cách thêm đoạn trích vào trang web của mình, vui lòng xem lại hướng dẫn này
/** * Restrict special characters from forms fields with special CSS class * Apply the class "wpf-char-restrict" to the field to enable. * * @link //wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ */ function wpf_dev_char_restrict() { ?> <script type="text/javascript"> jQuery(function($){ $( '.wpf-char-restrict' ).on( 'keypress', function(e){ var regex = new RegExp( "@" ); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { alert ( "Please fill out the form in English. Thank you!" ); // Put any message here e.preventDefault(); return false; } }); //Prevent any copy and paste features to by-pass the restrictions $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) { var regex = new RegExp( "@" ); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { alert ( "Pasting feature has been disabled for this field" ); // Put any message here e.preventDefault(); return false; } }); }); </script> <?php } add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );Trong chức năng đầu tiên, chúng tôi không cho phép nhập bất kỳ ký tự đặc biệt nào từ bàn phím. Hàm thứ hai cũng sẽ ngăn mọi chức năng dán bàn phím hoặc nhấp chuột vào trường này
Tạo biểu mẫu của bạn
Tiếp theo, tạo biểu mẫu của bạn và thêm các trường biểu mẫu của bạn
Thêm lớp CSS
Tiếp theo, chọn trường bạn muốn hạn chế. Nhấp vào Tùy chọn trường và chọn Nâng cao
Tiếp theo, thêm wpf-char-restrict vào trường Lớp CSS. Bạn sẽ lặp lại bước này cho từng trường biểu mẫu mà bạn muốn hạn chế
Và bây giờ nếu người dùng cố gắng nhập ký hiệu @, họ sẽ thấy một thông báo cảnh báo bật lên trên màn hình của họ
Bạn có muốn sử dụng cả JavaScript để cho phép chọn nhiều ngày từ bộ chọn ngày không?
Có liên quan
Tham khảo hành động. wpforms_wp_footer_end
Câu hỏi thường gặp
Q. Nếu tôi muốn hạn chế tất cả các ký tự đặc biệt thì sao?
A. Để hạn chế tất cả các ký tự đặc biệt, hãy sử dụng đoạn mã này
/** * Restrict special characters from forms fields with special CSS class * Apply the class "wpf-char-restrict" to the field to enable. * * @link //wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ */ function wpf_dev_char_restrict() { ?> <script type="text/javascript"> jQuery(function($){ $( '.wpf-char-restrict' ).on( 'keypress', function(e){ var regex = new RegExp('^[a-zA-Z]+$'); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { alert ( "Please fill out the form in English. Thank you!" ); // Put any message here e.preventDefault(); return false; } }); //Prevent any copy and paste features to by-pass the restrictions $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) { var regex = new RegExp('^[a-zA-Z]+$'); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { alert ( "Pasting feature has been disabled for this field" ); // Put any message here e.preventDefault(); return false; } }); }); </script> <?php } add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );Q. Nếu tôi muốn điều ngược lại thì sao?
A. Bạn có thể tạo ngược lại bằng cách sử dụng một đoạn mã khác. Ví dụ: nếu bạn muốn cho phép một số ký tự đặc biệt như ( ) –. /, bạn có thể sử dụng một lớp CSS khác, chẳng hạn như wpf-special-mask giống như cách bạn đã làm ở trên, nhưng đoạn mã sẽ trông như thế này