كيفية السماح بكتابة رموز معينة فقط ومنع أي رموز أخرى في حقل إدخال بإسنخدام جافاسكريبت JavaScript؟

يمكنك على كل حال استعمال حقل من نوع number. ان دعت الحاجة الى استعمال حقل من نوع text فيمكنك الاستماع للحدث onkeypress والتحقق من القيمة المدخلة ثم ان كانت موافقة لمعاييرك قبلتها وفي حالة عدم ذلك قم بتعطيل السلوك الافتراضي وهو: 

• طباعة المحرف

لنستعن بالتعابير النمطية regex لتوصيف النمط المقبول وهو: محارف الأرقام + محرفي + و - :

/[0-9\.\-+]/

مثال عملي:

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

function validate(e) {
    var key = e.keyCode || e.which;
    key = String.fromCharCode(key);
  
    var regex = /[0-9\.\-+]/;


    if( !regex.test(key) ) {
       e.returnValue = false;
       if(e.preventDefault) e.preventDefault();
    }
}

هناك أكثر من طريقة لتحقيق الغرض المنشود بإستخدام jQuery أو javascript.

هنا أضع لك حلاً وهو عبارة عن دالة جافاسكربت تقوم بالتحقق من قيمة المدخل عبر تعبير نمطي تستطيع التحكم بمعايير المطابقه فيه بسهولة من خلال تغيير النمط وفقاً لمتطلباتك.

	...
	<script>
	    $(document).ready(function() {
	        // نعرف دالة تقوم بمهمة مطابقة الرقم الموبايل المدخل من قبل المستخدم للمعايير المطلوبة
	        function isValidMobile (phone_number) {  // تقبل هذه الدالة مدخل واحد هو رقم الهاتف
	                phone_number = phone_number.replace(/\s+/g, ""); // نقوم بإزالة المسافات في حال وجودها في النص لغرض الفحص
	                return  phone_number.length > 9 && // طول النص يجب أن يكون اكبر من 9
	                phone_number.match( // هنا نستعمل التعبير النمطي أدناه للتأكد من مطابقة القيمة المدخلة للمعاير المطلوبة
	                    /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/im
	                );
	        }
	        // تستطيع الدالة التحقق من ألانماط التالية
	        // 123-456-7890
	        // 1234567890
	        // +31636363634
	        // 075-63546725
	 
	        $('#form').on("submit", function(e){ // نضبط النموذج لينصت إلى لحظة النقر على submit
	            e.preventDefault() // نقوم بتعطيل إرسال النموذج تلقائياً
	            var m=  $("#mobile").val() // نستخرج قيمة الموبايل المدخلة من قبل المستخدم
	            if( isValidMobile(m) ) { // نستدعي دالة التحقق من الموبايل مسبقة التعريف أعلاه
	                alert("Valid") // هنا يعيطنل المتصفح تنبيه أن المدخل قيمة معرفه وصالحة
	            } else {
	                alert("invalid") // هنا التنبيه القيمة المدحلة ليست رقم موبايل صالح
	            }
	 
	        })
	       });
	</script>
	
 
	<!-- HTML CODE -->
	 
	<form id="form" > <!--  نعرف النموذج-->
	    <input id="mobile" type="text"> <!-- نعرف حقل إدخال الموبايل -->
	    <input type="submit" value="submit"> <!-- نعرف زر الارسال-->
	</form>
	

يوجد إضافة جيكويري  jQuery alphanumeric plugin يمكنها اختبار مدخلات ما والتحقق من كونها تتبع نمط معين:

$('.input5').numeric({allow:"+-"});

حيث نتحقق من كون الحقل يقبل الأرقام من خلال دالة numeric مع إضافة رموز خاصة من خلال تمرير كائن فيه الخاصية allow

يمكن تطبيق تعبير منتظم من خلال HTML  والخاصية pattern

<input type="text" pattern="^[a-zA-Z0-9+-]+$" />

ويمكن أيضاً كلما أدخل المستخدم قيمة نتحقق من مدخلاته و نستبدل ما لايتبع النمط بالفراغ فلا يتم قبوله

$('input').on('input', function() {
  $(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});