los números de la fuerza de campo de entrada HTML

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

  •  03-10-2019
  •  | 
  •  

Pregunta

¿Es posible crear un campo de entrada que define el valor predeterminado de entrada de caracteres a números en un teléfono móvil (para que el un teclado numérico aparece )?
Por ejemplo para que sea más fácil tipo en un número de teléfono en un formulario HTML.

¿Fue útil?

Solución

Es posible entrada de límite en un "teléfono móvil" Los usos forma de teléfono móvil de entrada 

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

Introducir puede limitarse utilizando el formato = "* N"

Otros consejos

Para hacer más fácil inputing números, <input type="number"> uso. Para hacer más fácil introducir números de teléfono, el uso <input type="tel">. No todos los teléfonos les apoyará, pero el iPhone, al menos, le dará un teclado numérico por defecto en lugar del teclado normal. Ver la especificación y < a href = "http://diveintohtml5.ep.io/forms.html#type-number" rel = "noreferrer"> inmersión en HTML 5 para más información.

Puede utilizar <input type='tel'>. Esta es una nueva característica de HTML5. Los navegadores más antiguos simplemente por defecto en un campo de entrada de texto.

Así que usted puede utilizar cualquiera type="tel" o type="numbers".

La diferencia es que uno trata de que aparezca el teclado de marcación de teléfono y otra simplemente cambia a la entrada de números de su teclado móvil.

Por favor ver mi proyecto del filtro multi-navegador del valor del elemento de entrada de texto en su página web utilizando el lenguaje Javascript: Filtro de entrada clave . Ejemplo de código: 

<!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>

También vea mi página de "Filtro personalizado:" ejemplo del filtro de tecla de entrada

Aquí hay un ejemplo con Javascript. Esto sólo permitirá que los números del teclado numérico / números en la parte superior del teclado, y formateadores (desplazamiento / retroceso / etc). También puede considerar la adición de un setTimeout(), con un par de segundos de tiempo de espera, para el evento onchange para verificar en caso de que alguien no pega números en el campo, así como la validación del lado del servidor.

Ejemplo

http://jsfiddle.net/vce9s/

En mis pruebas de "puede utilizar cualquiera type="tel" o type="numbers"." en el iPhone type="tel" trae los números solamente teclado (como el teléfono) y type="numbers" trae el teclado numérico cambia a números y símbolos, por lo tanto el trabajo, sólo depende de su aplicación. Para mí sólo números necesito, así que utiliza type="tel" para facilitar su uso y funcionó muy bien!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top