reproducir - ¿Hay un tipo de entrada flotante en HTML5?

insertar audio mp3 en html

Question

Según html5.org , el atributo de valor del "tipo de entrada" número ", si se especifica y no está vacío, debe tener un valor que sea un número de punto flotante válido".

Sin embargo, es simplemente (en la última versión de Chrome, de todos modos), un control de "actualización" con enteros, no flotantes:

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

¿Existe un elemento de entrada de punto flotante nativo de HTML5 o una forma de hacer que el tipo de entrada de número funcione con flotantes, no con entradas? ¿O debo recurrir a un plugin de jQuery UI?

Answer 1

Basado en this respuesta

<input type="text" id="sno" placeholder="Only float with dot !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 46 || event.charCode == 0 ">

Sentido :

Código de caracteres:

• 48-57 igual a 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0 es Backspace (de lo contrario es necesario actualizar la página en Firefox)
• 46 es dot

&& es AND , || es el operador OR

Si intentas flotar con coma:

<input type="text" id="sno" placeholder="Only float with comma !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 44 || event.charCode == 0 ">

Chromium y Firefox compatibles (Linux X64) (otros navegadores no existen).

Answer 2

El tipo de number tiene un valor de step que controla qué números son válidos (junto con max y min ), que por defecto es 1 . Este valor también es utilizado por las implementaciones para los botones paso a paso (es decir, al presionar los aumentos aumenta por step ).

Simplemente cambie este valor a lo que sea apropiado. Para el dinero, probablemente se esperan dos decimales:

<input type="number" step="0.01">

(También establecería min=0 si solo puede ser positivo)

Si prefieres permitir cualquier número de posiciones decimales, puedes usar el step="any" (aunque para las monedas, te recomiendo que te mantengas en 0.01 ). En Chrome y Firefox, los botones paso a paso aumentarán / disminuirán en 1 cuando se use any . (gracias a la respuesta de Michal Stefanow por señalar any , y vea las especificaciones relevantes aquí )

Aquí hay un patio de recreo que muestra cómo varios pasos afectan varios tipos de entrada:

<form>
<input type=number step=1 /> Step 1 (default)<br />
<input type=number step=0.01 /> Step 0.01<br />
<input type=number step=any /> Step any<br />
<input type=range step=20 /> Step 20<br />
<input type=datetime-local step=60 /> Step 60 (default)<br />
<input type=datetime-local step=1 /> Step 1<br />
<input type=datetime-local step=any /> Step any<br />
<input type=datetime-local step=0.001 /> Step 0.001<br />
<input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
<input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
<input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>

Como de costumbre, agregaré una nota rápida: recuerde que la validación del lado del cliente es solo una conveniencia para el usuario. También debe validar en el lado del servidor!

Answer 3

Lo hago

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

luego, defino min en 0.4 y max en 0.7 con el paso 0.01: 0.4, 0.41, 0,42 ... 0.7

Answer 4

Puede utilizar el atributo de paso para el número de tipo de entrada:

<input type="number" id="totalAmt" step="0.1"></input>

step="any" permitirá cualquier decimal.
step="1" no permitirá decimales.
step="0.5" permitirá 0.5; 1; 1.5; ...
step="0.1" permitirá 0.1; 0.2; 0.3; 0.4; ...

Answer 5

Simplemente tuve el mismo problema, y ​​pude solucionarlo simplemente poniendo una coma y no un punto / parada completa en el número debido a la localización en francés .

Así funciona con:

2 esta bien

2,5 esta bien

2.5 es KO (el número se considera "ilegal" y recibe un valor vacío).

Answer 6

Vía: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Pero, ¿y si quiere que todos los números sean válidos, enteros y decimales por igual? En este caso, ajuste el paso a "cualquiera"

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

Funciona para mí en Chrome, no probado en otros navegadores.

Answer 7

puedes usar:

<input type="number" step="any" min="0" max="100" value="22.33">

espero ayudar, saludos