HTML Ввод значений силы поля

Можно ли создать поле ввода, в котором набор символов ввода по умолчанию будет состоять из цифр на мобильном телефоне (чтобы ЦИФРОВАЯ КЛАВИАТУРА ПОКРЫВАЛАСЬ)?
Например, чтобы упростить ввод номера телефона в HTML-форму.


mobile user-input wml
person user    schedule 17.09.2010    source источник

Ответы (7)


arrow_upward
5
arrow_downward

Можно ограничить ввод на «мобильном телефоне». Форма ввода мобильного телефона использует

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

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

person Deano    schedule 25.12.2010

arrow_upward
35
arrow_downward

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

person Brian Campbell    schedule 17.09.2010
comment
Обратите внимание на ограничения при вводе точек и запятых в такие поля ввода: stackoverflow.com/q/35315157/1066234 - person Avatar; 10.12.2017

arrow_upward
4
arrow_downward

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

person Ned Batchelder    schedule 17.09.2010

arrow_upward
2
arrow_downward

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

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

person JeroenEijkhof    schedule 17.09.2010
comment
Думал, что это сработает здесь: codepen.io/leongaban/pen/hbHsk, однако все еще застрял - person Leon Gaban; 01.08.2013

arrow_upward
1
arrow_downward

Пожалуйста, посмотрите мой проект кросс-браузерного фильтра значения элемента ввода текста на вашей веб-странице с использованием языка 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>

Также см. мою страницу "Пользовательский фильтр:" пример фильтра ключа ввода

person Andrej    schedule 31.07.2015

arrow_upward
0
arrow_downward

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

Пример

http://jsfiddle.net/vce9s/

person Robert    schedule 17.09.2010

arrow_upward
0
arrow_downward

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

person Matt Carroll    schedule 07.07.2016