Numeri di forza del campo di input HTML

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

  •  03-10-2019
  •  | 
  •  

Domanda

E 'possibile creare un campo di input che imposta il set predefinito di inserimento dei caratteri per i numeri su un cellulare (in modo che il tastiera numerica si apre )?
Ad esempio, per rendere più facile digitare un numero di telefono in un form HTML.

È stato utile?

Soluzione

E 'possibile l'ingresso limite su un "telefono cellulare" Gli usi di ingresso modulo cellulare 

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

ingresso qui può essere limitato utilizzando il formato = "* N"

Altri suggerimenti

Per rendere più facile inputing numeri, uso <input type="number">. Per rendere i numeri di telefono che entrano più facile, uso <input type="tel">. Non tutti i telefoni li sosterrà, ma l'iPhone, almeno vi darà un tastierino numerico di default al posto della tastiera normale. Vedere spec e < a href = "http://diveintohtml5.ep.io/forms.html#type-number" rel = "noreferrer"> Dive Into HTML5 per ulteriori informazioni.

È possibile utilizzare <input type='tel'>. Questa è una nuova funzionalità di HTML5. browser più vecchi possano semplicemente di default ad un campo di inserimento testo.

Quindi, è possibile utilizzare sia type="tel" o type="numbers".

La differenza è che si cerca di far apparire la tastiera Telefono e altri semplicemente imposta l'ingresso numeri della tastiera cellulare.

Si prega di consultare il mio progetto del filtro cross-browser del valore dell'elemento di immissione del testo sulla tua pagina web utilizzando il linguaggio Javascript: Input Filter Key . Esempio di codice: 

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

Vedi anche la mia pagina "Filtro personalizzato:" Esempio del filtro di ingresso chiave

Ecco un esempio con Javascript. Questo permetterà solo i numeri da tastierino numerico / numeri sulla parte superiore della tastiera, e formattatori (shift / backspace / etc). Si può anche prendere in considerazione l'aggiunta di un setTimeout(), con un timeout paio di secondi, per l'evento onchange per verificare nel caso in cui qualcuno non incolla i numeri nel campo, nonché la validazione lato server.

Esempio

http://jsfiddle.net/vce9s/

per il mio test di "è possibile utilizzare uno o type="tel" type="numbers"." su iPhone type="tel" porta in primo piano i numeri solo tastiera (come il telefono) e type="numbers" porta in primo piano il tastierino numerico passato a numeri e simboli, così sia il lavoro, dipende solo dalla vostra applicazione. Per quanto mi riguarda ho solo bisogno di numeri così ho usato type="tel" per la facilità d'uso e ha funzionato grande!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top