Числа силы поля ввода HTML - PullRequest
Новая
       49

Числа силы поля ввода HTML

12 голосов
/ 17 сентября 2010

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

Ответы [ 7 ]

34 голосов
/ 17 сентября 2010

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

5 голосов
/ 25 декабря 2010

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

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

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

4 голосов
/ 17 сентября 2010

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

2 голосов
/ 17 сентября 2010

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

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

1 голос
/ 31 июля 2015

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

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

1 голос
/ 17 сентября 2010

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

Пример

http://jsfiddle.net/vce9s/

0 голосов
/ 07 июля 2016

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

...