¿Hay alguna forma de definir un <input> que muestre una entrada de teclado que solo permita números y el punto decimal (o coma para usuarios internacionales)?Mostrando una entrada que solo permite números y el punto decimal?
<input type='tel'> muestra porquería teléfono que no necesito, y sin punto decimal
<input type='number' pattern='[0-9]*'> muestra todos los números, pero no tiene sentido
decimal ¿Qué puedo hacer para que la entrada necesito?
Si estaba haciendo esto en una aplicación de iOS de buena fe, probablemente podría agregar sus propios botones sobre el teclado, basado en this question, que es sobre la vista de accesorios pero el mismo proceso funcionaría.
De lo contrario, IamChuckB tiene razón y five keyboard types given in the Apple Developer's Library son exhaustivos.
Amigo de enlace roto :( – Picci
Puede probar este atributo a su campo type = "número":
pattern="\d+(\.\d*)?"
esto permitirá sólo dígitos con/sin un punto decimal y los números flotantes a la derecha.
NOTA # 1: esto todavía traerá el teclado completo pero en el panel de número/símbolo sea el predeterminado. El usuario todavía puede cambiar a alfanumérico ** PERO al evento onblur, el patrón se activa y elimina cualquier alfanumérico caracteres (pero no números). ** NOTA # 2: Tiene que ser tanto type = "number" como pattern = "\ d + (\. \ d *)?" para que funcione. Además, el navegador necesita admite html5. Esto funciona en navegadores normales y Safari en iOS. –
Las últimas versiones de Chrome parecen tener errores si combina type = "number" con este (y cualquier) patrón. Chrome solo aplica patrones de forma confiable a input type = "text" – egid
He intentado lo anterior, pero no funciona, y me resulta confuso para el usuario que muestra el teclado completo cuando solo se permiten números y un punto. Terminé usando 2 entradas type = "number" separadas por una estática "." – Mirko
Consulte mi proyecto del filtro de valor entre varios navegadores del elemento de entrada de texto en su página web utilizando el lenguaje de JavaScript: Input Key Filter. Puede filtrar el valor como un número entero, un número flotante o escribir un filtro personalizado, como un filtro de número de teléfono. Ver un ejemplo de código de entrada de un número flotante
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
\t <meta name="author" content="Andrej Hristoliubov [email protected]">
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
\t
\t <!-- For compatibility of IE browser with audio element in the beep() function.
\t https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
\t <meta http-equiv="X-UA-Compatible" content="IE=9"/>
\t
\t <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css"> \t \t
\t <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
\t <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
\t
</head>
<body>
\t <h1>Float field</h1>
Float field:
<input id="Float"
\t onchange="javascript: onChangeFloat(this)"
\t onblur="inputKeyFilter.isNaN(parseFloat(this.value), this);"
/>
<script>
\t CreateFloatFilter("Float");
\t
\t function onChangeFloat(input){
\t \t inputKeyFilter.RemoveMyTooltip();
\t \t var elementNewFloat = document.getElementById("NewFloat");
\t \t var float = inputKeyFilter.parseFloat(input.value);
\t \t if(inputKeyFilter.isNaN(float, input)){
\t \t \t elementNewFloat.innerHTML = "";
\t \t \t return;
\t \t }
\t \t elementNewFloat.innerHTML = float + " or localized value: " + float.toLocaleString();
\t }
</script>
New float: <span id="NewFloat"></span>
</body>
</html>También vea mi página de "Float field:" of the example of the input key filter
Asegúrese de incluir la autoatribución cuando se vincule a uno de sus proyectos en otra parte de la web; de lo contrario, se considera spam. –
Disculpe, no entiendo qué es" autoatribución ". ¿Qué debo hacer? – Andrej
Ponga una nota de algún tipo cerca de sus enlaces para aclarar que los escribió o lo que sea. –
=> Se permitirá únicamente punto decimal sola (.)
=> Solo permitirá valores decimales de tres dígitos después del punto. puede modificarlo cambiando a {1,3} en RegEx inferior.
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
if (!string.length)
return YES;
NSString *newString = [textField.text stringByReplacingCharactersInRange:range withString:string];
NSString *expression = @"^([0-9]+)?(\\.([0-9]{1,3})?)?$";
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:expression
options:NSRegularExpressionCaseInsensitive
error:nil];
NSUInteger numberOfMatches = [regex numberOfMatchesInString:newString
options:0
range:NSMakeRange(0, [newString length])];
if (numberOfMatches == 0)
return NO;
return YES;
}
-1? Al principio no entendí tu pregunta, supongo. Lo que di es correcto HTML5 que causa la validación de datos adecuada en navegadores totalmente compatibles. La lista [Biblioteca de desarrolladores de Apple] (https://developer.apple.com/library/safari/#codinghowtos/Mobile/UserExperience/_index.html) lista 15 proporciona los patrones que realmente harán que se muestren diferentes teclados de iphone. Me imagino que la lista es exhaustiva, y buenos días señor. – chucksmash
@IamChuckB: Las respuestas incorrectas son downvoted. No es personal Curiosamente, hubiera aceptado tu comentario como correcto con un voto alternativo. –
Bastante justo. Sin daño, sin falta, espero. – chucksmash