attribute - html5 entrada por dinero/moneda

header html

Question

Parece que no puedo averiguar qué usar para aceptar valores monetarios en un formulario.

Yo he tratado...

<input type="number" min="0" max="10000" step="1" name="Broker_Fees" id="broker_fees" required="required">

Pero eso entonces no permitirá entradas de peniques.

Quiero que el control de botón incremental aumente en libras, pero todavía quiero la capacidad de ingresar peniques.

¿Quién querría usar un botón incremental que movió 1p a la vez?

Quizás estoy usando el control incorrecto, pero ¿no puedo encontrar un control de dinero / moneda?

¿Alguien puede recomendar la mejor manera de aceptar valores monetarios (incluyendo comas, lugares decimales y símbolo de moneda) utilizando HTML5?

Gracias, 1DMF

Answer 1

Bueno, al final tuve que comprometerme con la implementación de una solución HTML5 / CSS, los botones de incremento en IE (¡de todos modos están un poco destrozados en FF!), Pero obteniendo una validación numérica que la ruleta JQuery no proporciona. Aunque he tenido que ir con un paso de números enteros.

span.gbp {
    float: left;
    text-align: left;
}

span.gbp::before {
    float: left;
    content: "/00a3"; /* £ */
    padding: 3px 4px 3px 3px;
}

span.gbp input {
     width: 280px !important;
}

<label for="broker_fees">Broker Fees</label>
<span class="gbp">
    <input type="number" placeholder="Enter whole GBP (&pound;) or zero for none" min="0" max="10000" step="1" value="" name="Broker_Fees" id="broker_fees" required="required" />
</span>

La validación es un poco inestable en todos los navegadores, donde IE / FF permite comas y lugares decimales (siempre que sea .00), mientras que Chrome / Opera no y solo quieren números.

Supongo que es una pena que el JQuery spinner no funcione con una entrada de tipo numérico, pero los documentos explícitamente no lo hacen :-( y estoy sorprendido de por qué un widget de número de spinner permite la entrada de cualquier personaje ascii?

Answer 2

Intente usar step="0.01" , luego pasará un centavo cada vez.

p.ej:

<input type="number" min="0.00" max="10000.00" step="0.01" />

Answer 3

Para permitir fracciones (centavos) en una entrada de número de HTML5, debe especificar el atributo "step" a = "any":

<input type="number" min="1" step="any" />

Esto evitará específicamente que Chrome muestre un error cuando se ingrese una moneda decimal / fraccional en la entrada. Mozilla, IE, etc. No cometa errores si olvida especificar el step="any" . La especificación W3C establece que step = "any" debería, de hecho, ser necesario para permitir decimales. Entonces, definitivamente deberías usarlo.

Además, el ingreso de números ahora es ampliamente soportado (> 90% de los usuarios).