javascript - ejemplo - Forzar teclado numérico iOS con patrón personalizado/de moneda

keycode javascript ejemplo

Question

¿Hay alguna posibilidad de forzar a un dispositivo iOS a mostrar el teclado numérico mientras usa un patrón personalizado como tipo de entrada ?

mi patrón de entrada:

<input id="price" class="numeric" pattern="/d+((/.|,)/d{1,2})?" name="price" 
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />

Quiero escribir un valor de moneda como ''14 .99 ''y mostrar un teclado con acceso a números en el dispositivo iOS

<input type=''number'' />
<input pattern=''[0-9]*'' />
<input pattern=''[/d]*'' />

a todos les falta el signo decimal y / o no están validando como número al agregar un signo decimal. Una forma alternativa podría ser una función de JavaScript que está creando el signo decimal en el lugar correcto, como presionar 1-> 2-> 9-> 9 en este orden crea al presionar una tecla () 0.01-> 0.12-> 1.29-> 12.99, pero esto requiere que el campo de entrada sea type=''text'' -> el problema obvio aquí es que el teclado de texto se muestra cuando se enfoca el campo de entrada.

¿Cómo puedo resolver este problema?

EDITAR

Ambiente:

• JQM 1.3.2
• jquery 1.8.2

Answer 1

Hice este pequeño fragmento para lograr lo que quieres y lo he probado en iPhone 5 v7.0.3

Utilicé e.which leer el CharCode ingresado y luego insertarlo en una matriz ( anterior ) que representa los dígitos antes de la marca decimal y otra matriz ( después ) para mover los valores de la matriz ( anterior ) más allá de la marca decimal.

Puede parecer complicado, debido a mis humildes habilidades de programación.

1) Demo del código - 2) Demo de conversión de moneda

HTML:

<input type="tel" id="number" />

JS

Variables y funciones:

// declare variables
var i = 0,
    before = [],
    after = [],
    value = [],
    number = '''';

// reset all values
function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '''';
    $("#number").val("");
    $(".amount").html("");
}

// add thousand separater
function addComma(num) {
  return num.toString().replace(//B(?=(/d{3})+(?!/d))/g, ",");
}

Código principal:

// listen to keyup event
$("#number").on("keyup", function (e, v) {

    // accept numbers only (0-9)
    if ((e.which >= 48) && (e.which <= 57)) {

        // convert CharCode into a number   
        number = String.fromCharCode(e.which);

        // hide value in input
        $(this).val("");

        // main array which holds all numbers
        value.push(number);

        // array of numbers before decimal mark
        before.push(value[i]);

        // move numbers past decimal mark
        if (i > 1) {
            after.push(value[i - 2]);
            before.splice(0, 1);
        }

        // final value
        var val_final = after.join("") + "." + before.join("");

        // show value separated by comma(s)
        $(this).val(addComma(val_final));

        // update counter
        i++;

        // for demo
        $(".amount").html(" " + $(this).val());

    } else {

        // reset values
        resetVal();
    }
});

Reiniciar:

// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});

Resultado:

Answer 2

Por ahora, JavaScript es la única solución. Esta es la forma más sencilla de hacerlo (usando jQuery):

HTML

<input type="text">

JavaScript

$(''input[type="text"]'').on(''touchstart'', function() {
  $(this).attr(''type'', ''number'');
});

$(''input[type="text"]'').on(''keydown blur'', function() {
  $(this).attr(''type'', ''text'');
});

La idea es simple La entrada comienza y termina con type = "text", pero se convierte brevemente en type = "number" en el evento touchstart. Esto hace que aparezca el teclado iOS correcto. Tan pronto como el usuario comienza a ingresar cualquier entrada o abandona el campo, la entrada se convierte en type = "text" una vez más, evitando así la validación.

Hay un inconveniente en este método. Cuando el usuario vuelve a una entrada que ya se ha completado, la entrada se perderá (si no se valida). Esto significa que el usuario no podrá volver atrás y editar los campos anteriores. En mi caso, esto no es tan malo porque el usuario puede querer usar la calculadora una y otra vez con diferentes valores, por lo que eliminar automáticamente la entrada los salvará unos pocos pasos. Sin embargo, esto puede no ser ideal en todos los casos.

Parece que Mobile Safari admite los nuevos atributos de tipo de entrada HTML5 de correo electrónico, número, búsqueda, teléfono y url. Estos cambiarán el teclado que se muestra. Ver el atributo de tipo.

Entonces, por ejemplo, podrías hacer esto:

<input type="number" />

Y cuando el cuadro de entrada tiene enfoque, se muestra el teclado numérico (como si el usuario tuviera el teclado completo y presionara el botón "123".

Si realmente solo quieres números, puedes especificar:

<input type="tel" />

Y luego el usuario obtendría el número de teléfono que marca el teclado.

Sé que esto funciona con Mobile Safari; solo asumo que funcionará con UIWebView.

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/

Answer 3

Creo que puedes usar el mismo enfoque que sugerí a Ranjan .

Usando un campo de texto como un buffer. Primero debe detectar cuándo aparece el teclado y verificar si el primero es la vista web. Luego se convierte en una vista de texto como el primer respondedor.

Cuando configura el texto dentro de la entrada de la vista web, puede agregar un poco de lógica para validar el número.

Aquí hay un enlace de mi proyecto de ejemplo con la solución, en su caso no necesita cambiar el inputView. Pero el enfoque es el mismo, usa un Hombre en el medio.