HTML Eingabefeld Kraft Zahlen

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

  •  03-10-2019
  •  | 
  •  

Frage

Ist es möglich, ein Eingabefeld zu erstellen, dass setzt der Standard-Eingabezeichensatz Zahlen auf einem Handy (so das numerische Tasten POP UP )?
Zum Beispiel ihm einfachen Typen in einer Telefonnummer in ein HTML-Formular zu machen.

War es hilfreich?

Lösung

Es ist möglich, zu begrenzen Eintrag auf einem „Handy“ Die Handy-Formulareingabe verwendet 

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

hier Eingang begrenzt werden kann Format = "* N"

Andere Tipps

Um Zahlen zu erleichtern, Verwendung <input type="number"> machen inputing. Um Eingabe von Telefonnummern zu erleichtern, verwenden <input type="tel">. Nicht alle Telefon unterstützt sie, aber das iPhone zumindest gibt Ihnen einen Ziffernblock standardmäßig anstelle der normalen Tastatur. Siehe die spec und < a href = "http://diveintohtml5.ep.io/forms.html#type-number" rel = "noreferrer"> Dive Into HTML5 für weitere Informationen.

Sie können <input type='tel'> verwenden. Dies ist eine neue HTML5-Funktion. Ältere Browser wird einfach in ein Texteingabefeld Standard.

So können Sie entweder type="tel" oder type="numbers" verwenden.

Der Unterschied ist, dass man versucht, das Telefon Wahltastatur aufzurufen und andere Schalter einfach auf die Zahlen Eingabe Ihrer mobilen Tastatur.

Bitte beachten Sie mein Projekt der Cross-Browser-Filter des Wertes des Texteingabeelementes auf Ihrer Web-Seite mit JavaScript Sprache: Input Key Filter . Code-Beispiel: 

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

Siehe auch meine Seite "Custom Filter:" Beispiel für die Eingabe-Taste Filter

Hier ist ein Beispiel mit Javascript. Dies wird nur dann erlauben, aus den Zahlen numpad / Zahlen auf dem Tastenfeld, und Formatierer (Shift / Rücktaste / etc). Sie können sich auch eine setTimeout(), mit ein paar Sekunden Timeout hinzufügen, für das onchange Ereignis im Falle überprüfen jemand nicht Zahlen in das Feld sowie serverseitige Validierung Pasten.

Beispiel

http://jsfiddle.net/vce9s/

für meine Prüfung von „können Sie entweder type="tel" oder type="numbers" verwenden.“ auf dem iPhone type="tel" nur Tastatur die Zahlen bringt (wie Telefon) und type="numbers" das numerische Tastenfeld bringt bis zu Zahlen und Symbolen umgeschaltet, so beide arbeiten, hängt nur von Ihrer Anwendung. Für mich ich nur Zahlen brauchen, damit ich type="tel" für einfache Bedienung verwendet und es funktionierte großartig!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top