أرقام قوة حقل إدخال HTML

StackOverflow https://stackoverflow.com/questions/3736982

  •  03-10-2019
  •  | 
  •  

سؤال

هل من الممكن إنشاء حقل إدخال يعين تعيين حرف الإدخال الافتراضي على أرقام على أ هاتف محمول (لذلك لوحة المفاتيح العددية تنبثق)?
على سبيل المثال لجعله أسهل في رقم الهاتف في نموذج HTML.

هل كانت مفيدة؟

المحلول

من الممكن تقييد الإدخال على "الهاتف المحمول" الذي يستخدمه إدخال نموذج الهاتف المحمول 

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

يمكن أن تكون الإدخال هنا محدودة باستخدام Format = "*N"

نصائح أخرى

لجعل أرقام الإدخال أسهل ، استخدم <input type="number">. لجعل أرقام الهواتف أسهل ، استخدم <input type="tel">. لن يدعمهم كل الهاتف ، لكن iPhone على الأقل سيعطيك لوحة مفاتيح رقمية افتراضيًا بدلاً من لوحة المفاتيح العادية. نرى المواصفات و الغوص في HTML5 للمزيد من المعلومات.

يمكنك استخدام <input type='tel'>. هذه ميزة HTML5 جديدة. سوف المتصفحات القديمة ببساطة افتراضي إلى حقل إدخال النص.

حتى تتمكن من استخدام أي منهما type="tel" أو type="numbers".

الفرق هو أن المرء يحاول طرح لوحة مفاتيح الاتصال الهاتفية والآخر ببساطة إلى إدخال أرقام لوحة مفاتيح الهاتف المحمول.

يرجى الاطلاع على مشروع مرشح المتصفح المتقاطع لقيمة عنصر إدخال النص على صفحة الويب الخاصة بك باستخدام لغة JavaScript: مرشح مفتاح الإدخال . مثال رمز:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Phone number</h1>
	Please type a phone number in the +**(***)***-**-** format. Example: +1(23)456-78-90
	<br/>
	<input id="PhoneNumber" value="+()--">
	<script>
		function getArrayPhoneNumber(value){
			if (typeof value == 'undefined')
				value = document.getElementById("PhoneNumber").value;
			return value.match(/^(\+?\d*)\((\d*)\)(\d*)-?(\d*)-?(\d*)$/);
		}
		
		function getPhoneNumber(){
			var arrayPhoneNumber = getArrayPhoneNumber();
			if(!arrayPhoneNumber)
				return "";
				
			var phoneNumber = arrayPhoneNumber[1] + arrayPhoneNumber[2] + arrayPhoneNumber[3] + arrayPhoneNumber[4] + arrayPhoneNumber[5];
			return phoneNumber;
		}
		
		inputKeyFilter.Create("PhoneNumber", function(event){//onChange event
				inputKeyFilter.RemoveMyTooltip();
				
				var arrayPhoneNumber = getArrayPhoneNumber();
				if(!arrayPhoneNumber || (arrayPhoneNumber.length != 6)){
					document.getElementById("NewPhoneNumber").innerHTML = "Incorrect format of the phone number";
					return;
				}
				
				var elementNewPhoneNumber = document.getElementById("NewPhoneNumber");
				var phoneNumber = getPhoneNumber();
				if(inputKeyFilter.isNaN(phoneNumber, this)){
					elementNewPhoneNumber.innerHTML = "";
					return;
				}
				elementNewPhoneNumber.innerHTML = phoneNumber;
			}
			, function(elementInput, value){//customFilter
				var arrayPhoneNumber = getArrayPhoneNumber(value);
				if(arrayPhoneNumber == null){
					inputKeyFilter.TextAdd(isRussian() ?
							"Недопустимый формат телефонного номера. Например: +1(234)56-78-90"
							: "Incorrect format of the phone number. Example: +1(234)56-78-90"
						, elementInput);
					if(elementInput.value == "")
						elementInput.value = elementInput.defaultValue;
					return false;
				}
				return true;
			}
			
			//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
			, function(event){ inputKeyFilter.isNaN(parseInt(getPhoneNumber()), this); }
		);
	</script>
	 New phone number: <span id="NewPhoneNumber"></span>
</body>
</html>

انظر أيضا صفحتي "مرشح مخصص:" مثال على مرشح مفتاح الإدخال

إليك مثال مع JavaScript. سيسمح هذا فقط بأرقام من Numpad/Numbers أعلى لوحة المفاتيح ، والنسج (SHIFT/Backspace/etc). يمكنك أيضًا التفكير في إضافة ملف setTimeout(), ، مع بضع ثوان مهلة ، ل onchange حدث للتحقق في حالة صحة شخص ما غير أرقام في الحقل وكذلك التحقق من صحة جانب الخادم.

مثال

http://jsfiddle.net/vce9s/

لاختبار "يمكنك استخدام أي منهما type="tel" أو type="numbers". "على iPhone type="tel" يجلب أرقام لوحة المفاتيح فقط (مثل الهاتف) و type="numbers" يبرز مفتاحية لوحة المفاتيح الرقمية إلى الأرقام والرموز ، لذلك يعتمد كلا العمل ، فقط على تطبيقك. بالنسبة لي أنا فقط بحاجة إلى أرقام لذلك استخدمت type="tel" لسهولة الاستخدام وعملت بشكل رائع!

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top