ubicacion - Forzar entrada numérica al ver el sitio web en Android y iOS

como ver trending topic twitter

Question

Necesito tener una entrada que seguirá siendo type="text" , pero abrirá el teclado numérico en dispositivos Android e iOS.

Esto se debe a que el campo de entrada todavía tendrá caracteres como £ y , lo que no será posible dentro de un type="number" o type="tel" .

Descubrí que puedes forzar el teclado numérico en iOS usando pattern="/d*" , pero esto no hace nada para Android.

Esto es lo que tengo hasta ahora:

<input type="text" inputmode="numeric" pattern="/d*" value="£2,000,000" />

http://jsbin.com/nelodixeza/edit?html,output

Answer 1

Estaba trabajando en algo similar.

eche un vistazo a mi ejemplo: https://jsfiddle.net/pj2uwmtL/6/

$("input.numbers").keypress(function(event) {
  return //d/.test(String.fromCharCode(event.keyCode));
});

Answer 2

Yo suelo:

<input type="text" pattern="/d*" />

Nada más es necesario.

Funciona muy bien en iPhone particularmente con los nuevos tipos de teclado. Funciona con el predeterminado y Swiftkey.

Además esto funciona en todos los dispositivos Android.

Actualizar:

Dale una oportunidad:

<input type="text" step="0.01" pattern="[0-9]*">

<input type="text" min="0" max="100" pattern="[0-9]*">

Or

<input type="text" pattern="/-?/d+(/./d{0,})?">

Answer 3

Editar (en caso de que se limpien los comentarios), esta respuesta se escribió antes de la pregunta especificada que era para aplicaciones móviles y aplicaciones móviles. Sin embargo, esta respuesta ayudará a aquellos que buscan una solución al usar una WebView en Android.

En Android, la vista web utilizada para mostrar la página puede anular onCreateInputConnection. Con este método puede alterar las imeOptions, aunque todavía está limitado a los mismos tipos numéricos. Alternativamente, usted podría trabajar en la creación de su propio tipo de imagen .

Un ejemplo:

@Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
    InputConnection inputConnection = super.onCreateInputConnection(outAttrs);
    outAttrs.inputType = outAttrs.inputType | InputType.TYPE_NUMBER_VARIATION_NORMAL;
    return inputConnection;
}

Sin embargo, aunque estoy seguro de que lo anterior resolverá los problemas de muchas personas, creo que necesitas algo un poco más complejo. Mi sugerencia es que cualquiera que sea el tipo de teclado que utilices, usas java para validar y formatear tus entradas, lo que lleva un par de pasos:

Configura una interfaz de JavaScript

webView.addJavascriptInterface(new ValidationInterface(), "appValidator");

Crear la clase de interfaz.

public class ValidationInterface {

    //This method would only tell you if a char is invalid
    @JavascriptInterface
    public boolean isValid(String text){
        int len = text.length();
        //replace everything thats NOT 0-9, $, £, comma or dot
        text = text.replaceAll("[^0-9$£,/.", "");
        //Its valid if the length didnt change (because nothing needs removing)
        return text.length() == len;
    }

    //This method would strip out invalid text as you go
    @JavascriptInterface
    public String getValid(String text){
        //replace everything thats NOT 0-9, $, £, comma or dot
        return text.replaceAll("[^0-9$£,/.", "");
    }

}

Llame a la validación cuando el texto cambie

function validate(value) {
    //ive not written js in a long time, you''ll definitely need to tweak this
    //EITHER do this
    var valid = appValidator.isValid(value);
    if (valid) {
        //DO SOEMTHING
    } ...

    //OR try this
    var validText = appValidator.getValid(value);
    $(''#theField'').value(validText); //really not sure this is valid
}

//also just be aware you might need to use keyUp or somethign other than change
//if you are replacing the text as you type, using getValid method
<input id="theField" type="text" onChange="validate(this.value)" ... />