Reemplazar un punto usando JavaScript elimina todo

jquery regex

Question

He entrado en un problema extraño. Cuando se intenta reemplazar un punto en una entrada numérica, en lugar de reemplazar solo ese punto, se borra toda la entrada.

$("[data-input-payment-id]").on("keyup", function(e) {
var test_value = $(this).val().replace(//./g, "");
$(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

JSFIDDLE

¿Cómo lo cambio para que solo elimine los puntos?

Answer 1

Creo que (adivinar) es porque usas type="number" . Luego, los dígitos seguidos por un punto, por ejemplo, 123. , no es un número válido, y val vuelve en blanco.

Puedes probar esto en su lugar:

$("[data-input-payment-id]").on("keyup", function(e) {
var test_value = this.value.replace(/[^/d,]/g, "");
$(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-input-payment-id="12">

Esto utiliza el tipo de texto normal y filtra todo lo que no sea dígitos en el reemplazo.

Editar:
Cambió la expresión regular para que coincida con cualquier cosa, excepto números y comas .

Answer 2

Esto no es realmente una solución como personalmente me gustaría verla, pero esto es lo que hice para resolver el problema en cuestión. Cambié el código JavaScript para escuchar el código de clave 46 (el . ) Y estoy devolviendo falso en el detector de eventos de pegado para deshabilitar el pegado de un valor en la entrada.

$("[data-input-payment-id]").on("keypress", function(e) {
var key = e.charCode ? e.charCode : e.keyCode;
if (key == 46) {
return false;
}
});
$("[data-input-payment-id]").on("paste", function(e) {
return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

Funciona al menos en Chrome y Edge.

Answer 3

Me gustaría:

• En lugar del evento keyup , escuche el evento de input . De esta manera también se puede permitir pegar.
• Mantenga un registro del valor correcto anterior, para que pueda volver a él. Esto es necesario porque las entradas type=number tendrán una cadena vacía como valor tan pronto como la entrada deje de ser válida (como un número). Almacenaría ese valor correcto anterior en una propiedad de input elemento de input
• Con el uso de la propiedad validity.stepMismatch puede saber si el valor actual está violando la propiedad step de la input que por defecto es 1. Con un paso de 1, esto significa que ingresar un número con un separador decimal se considerará una discrepancia .
• Como un separador decimal final no dará (aún) un número fraccional, pasará la validación anterior. Entonces, devuelva el valor a la entrada cuando todo esté bien: esto eliminará cualquier separador decimal final que pueda haber sido ingresado.

$("[data-input-payment-id]").on("input", function (e) {
if (!this.validity.stepMismatch) {
$(this).data("lastValid", $(this).val());
};
$(this).val($(this).data("lastValid") || "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number"data-input-payment-id="12">

Habiendo dicho esto, personalmente no estoy a favor de bloquear la entrada del usuario de esta manera: por un momento podrían pensar que su teclado está roto. En mi opinión, es mejor permitir que el usuario escriba cualquier cosa y simplemente indicar con un mensaje junto a la entrada que la entrada no es válida (hasta que lo sea).

Answer 4

Tu ejemplo de Keypress me dio esta idea. Si puede interceptar el evento de pulsación de tecla, es posible verificar cualquier validación antes de agregar el valor real. Este ejemplo tampoco requiere ningún condicional y puede filtrar cualquier valor que no sea un dígito.

$("[data-input-payment-id]").on("keypress", function(e) {
if ((this.value + e.key).match(//D/)) {
return false;
}
});
$("[data-input-payment-id]").on("paste", function(e) {
var pasteData = (e.originalEvent.clipboardData || window.clipboardData).getData(''text'');
pasteData = pasteData.replace(//D/g, '''');
this.value = this.value + pasteData;
return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

• Permite pegar datos con filtrado.
• No hay condicionales específicos.
• Puede ser modificado para validación personalizada

JSFIDDLE

Answer 5

Ver documentos MDN en la input s de number de tipo:

Valor

Un número que representa un número, o vacío

Si la cadena de entrada no se puede convertir a un número adecuado, como si la cadena contiene dos puntos, el acceso a la propiedad .value devolverá la cadena vacía.

El .value (y la función val() ) todavía devolverán cadenas , pero esas cadenas deben representar números válidos (o ser la cadena vacía). En lugar de establecer el valor del elemento incondicionalmente, simplemente verifique si el valor no es la cadena vacía primero:

$("[data-input-payment-id]").on("keyup", function(e) {
const val = $(this).val();
if (val === '''') return;
var test_value = $(this).val().replace(//./g, "");
$(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

O podría usar una entrada de texto, y posiblemente un pattern :

$("[data-input-payment-id]").on("keyup", function(e) {
const val = $(this).val();
var test_value = $(this).val().replace(//./g, "");
$(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input data-input-payment-id="12">
<input type="submit">
</form>

<form>
<input pattern="^/d+$" data-input-payment-id="12">
<input type="submit">
</form>

Answer 6

$(this).val() está devolviendo una cadena vacía si una entrada con type="number" tiene más de una .

Puede solucionar esto, solo ejecutando el reemplazo del valor si $(this).val() no devuelve una cadena vacía.