numéros de force de champ d'entrée HTML
-
03-10-2019 - |
Question
Est-il possible de créer un champ d'entrée qui définit le caractère entrée défaut à numéros sur un téléphone mobile (donc CLAVIER NUMERIQUE Déroule )?
Par exemple, pour le rendre plus facile le type dans un numéro de téléphone dans un formulaire HTML.
La solution
Il est possible de limiter l'entrée sur un « téléphone mobile » Les utilisations d'entrée sous forme de téléphone mobile
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
entrée ici peut être limité en utilisant le format = "* N"
Autres conseils
Pour rendre les numéros inputing plus facile, l'utilisation <input type="number">
. Pour faciliter la saisie des numéros de téléphone plus facile, l'utilisation <input type="tel">
. Pas tous les téléphones les soutiendra, mais l'iPhone au moins vous donnera un clavier numérique par défaut au lieu du clavier normal. Voir la spécification et < a href = "http://diveintohtml5.ep.io/forms.html#type-number" rel = "noreferrer"> Plongez au coeur de HTML5 pour plus d'informations.
Vous pouvez utiliser <input type='tel'>
. Ceci est une nouvelle fonctionnalité de HTML5. Les anciens navigateurs simplement par défaut à un champ de saisie de texte.
vous pouvez donc utiliser soit type="tel"
ou type="numbers"
.
La différence est que l'on essaie de mettre en place votre clavier de numérotation téléphonique et d'autres commutateurs simplement à l'entrée des numéros de votre clavier mobile.
S'il vous plaît voir mon projet du filtre cross-browser de la valeur de l'élément d'entrée de texte sur votre page web en utilisant le langage JavaScript: Filtre d'entrée Key . Exemple de code:
<!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>
Voici un exemple avec JavaScript. Cela ne permettra nombre des chiffres sur / Numpad haut du clavier, et formatteurs (décalage / backspace / etc). Vous pouvez également envisager d'ajouter un setTimeout()
, avec un délai d'attente de deux secondes, pour l'événement onchange
pour vérifier au cas où quelqu'un colle les numéros non dans le champ ainsi que la validation côté serveur.
Exemple
pour mes tests de « vous pouvez utiliser type="tel"
ou type="numbers"
. »
sur iPhone type="tel"
fait apparaître les numéros que le clavier (comme le téléphone) et type="numbers"
fait apparaître le clavier numérique commuté sur des chiffres et des symboles, donc à la fois le travail, tout dépend de votre application. Pour moi, je ne dois donc je nombre utilisé type="tel"
pour la facilité d'utilisation et il a très bien fonctionné!