Число полей ввода поля ввода HTML

Возможно ли создать поле ввода, которое задает набор символов ввода по умолчанию для номера на мобильном телефоне (поэтому ЧИСЛЕННАЯ КЛАВИАТУРА POPS UP)?
Например, чтобы упростить тип телефонного номера в форме HTML.

Ответ 1

Можно ограничить ввод на "мобильный телефон", Запись в форме мобильного телефона использует

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

ввод здесь может быть ограничен с помощью формата = "* N"

Ответ 2

Чтобы упростить ввод чисел, используйте <input type="number">. Чтобы упростить ввод номеров, используйте <input type="tel">. Не все телефоны будут поддерживать их, но iPhone по крайней мере даст вам цифровую клавиатуру по умолчанию вместо обычной клавиатуры. Подробнее см. спецификацию и Dive Into HTML5.

Ответ 3

Вы можете использовать <input type='tel'>. Это новая функция HTML5. Старые браузеры просто по умолчанию будут вводить текстовое поле ввода.

Ответ 4

Таким образом, вы можете использовать либо type="tel", либо type="numbers".

Разница в том, что вы пытаетесь вызвать клавиатуру телефона, а другие просто переключаются на ввод номера вашей мобильной клавиатуры.

Ответ 5

Вот пример с Javascript. Это позволит только номера из numpad/numbers поверх клавиатуры и форматировать (shift/backspace/etc). Вы также можете рассмотреть возможность добавления setTimeout() с тайм-аутом в пару секунд для события onchange для проверки того, что кто-то вставляет не номера в поле, а также проверку на стороне сервера.

Пример

http://jsfiddle.net/vce9s/

Ответ 6

Пожалуйста, ознакомьтесь с моим проектом кросс-браузерного фильтра значения элемента ввода текста на вашей веб-странице с использованием языка JavaScript: Фильтр входных ключей, Пример кода:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<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>

Ответ 7

для моего тестирования "вы можете использовать либо тип =" tel ", либо type =" numbers "." на iPhone type = "tel" отображает только клавиатуру с цифрами (например, телефон), а type = "numbers" вызывает цифровую клавиатуру, которая переключается на цифры и символы, поэтому обе работают, просто зависит от вашего приложения. Для меня мне нужны только номера, поэтому я использовал type = "tel" для удобства использования, и он отлично работает!