Làm cách nào để hạn chế các ký tự đặc biệt trong JavaScript hộp văn bản?

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 https://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 https://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

Làm cách nào để không cho phép các ký tự đặc biệt trong JavaScript?

Làm cách nào để kiểm tra các ký tự đặc biệt trong TextBox bằng JavaScript?

Làm cách nào để hạn chế các ký tự đặc biệt trong TextBox trong Angularjs?

Làm cách nào để hạn chế các ký tự đặc biệt trong TextBox bằng phản ứng js?