form - jQuery solo permite el número de entrada flotante

jquery validation rules

Question

Estoy creando una máscara de entrada que solo permite el número flotante. Pero el problema actual es que no puedo verificar si ingresaron múltiples puntos. ¿Puedes revisar esos puntos y prevenirlo por mí?

Código en vivo: http://jsfiddle.net/thisizmonster/VRa6n/

$(''.number'').keypress(function(event) {
if (event.which != 46 && (event.which < 47 || event.which > 59))
{
event.preventDefault();
if ((event.which == 46) && ($(this).indexOf(''.'') != -1)) {
event.preventDefault();
}
}
});

Answer 1

Bueno para valores enteros y flotantes. Además, copiar / pegar evento del portapapeles.

var el = $(''input[name="numeric"]'');
el.prop("autocomplete",false); // remove autocomplete (optional)
el.on(''keydown'',function(e){
var allowedKeyCodesArr = [9,96,97,98,99,100,101,102,103,104,105,48,49,50,51,52,53,54,55,56,57,8,37,39,109,189,46,110,190]; // allowed keys
if($.inArray(e.keyCode,allowedKeyCodesArr) === -1 && (e.keyCode != 17 && e.keyCode != 86)){ // if event key is not in array and its not Ctrl+V (paste) return false;
e.preventDefault();
} else if($.trim($(this).val()).indexOf(''.'') > -1 && $.inArray(e.keyCode,[110,190]) != -1){ // if float decimal exists and key is not backspace return fasle;
e.preventDefault();
} else {
return true;
};
}).on(''paste'',function(e){ // on paste
var pastedTxt = e.originalEvent.clipboardData.getData(''Text'').replace(/[^0-9.]/g, ''''); // get event text and filter out letter characters
if($.isNumeric(pastedTxt)){ // if filtered value is numeric
e.originalEvent.target.value = pastedTxt;
e.preventDefault();
} else { // else
e.originalEvent.target.value = ""; // replace input with blank (optional)
e.preventDefault(); // retur false
};
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="numeric" value="" placeholder="insert value">

[2017-10-31] Vanilla.js

let el = document.querySelector(''input[name="numeric"]'');
el.addEventListener(''keypress'',(event) => {
let k = event.key,
t = isNaN(k),
sc = [''Backspace''].indexOf(k) === -1,
d = k === ''.'',dV = el.value.indexOf(''.'') > -1,
m = k === ''-'',mV = el.value.length > 0;
if((t && sc) && ((d && dV) || (m && dV) || (m && mV) || ((t && !d) && (t && !m)))){event.preventDefault();}
},false);
el.addEventListener(''paste'',(event) => {
if(event.clipboardData.types.indexOf(''text/html'') > -1){
if(isNaN(event.clipboardData.getData(''text''))){event.preventDefault();}
}
},false);

<input type="text" name="numeric">

Answer 2

Creo que todo el mundo olvidó el caso de pegar texto con el mouse, en el que no puede detectar las pulsaciones, porque no hay ninguna. Aquí hay otro enfoque en el que he estado trabajando.

// only integer or float numbers (with precision limit)
// example element: <input type="text" value="" class="number" name="number" id="number" placeholder="enter number" />
$(''.number'').on(''keydown keypress keyup paste input'', function () {
// allows 123. or .123 which are fine for entering on a MySQL decimal() or float() field
// if more than one dot is detected then erase (or slice) the string till we detect just one dot
// this is likely the case of a paste with the right click mouse button and then a paste (probably others too), the other situations are handled with keydown, keypress, keyup, etc
while ( ($(this).val().split(".").length - 1) > 1 ) {
$(this).val($(this).val().slice(0, -1));
if ( ($(this).val().split(".").length - 1) > 1 ) {
continue;
} else {
return false;
}
}
// replace any character that''s not a digit or a dot
$(this).val($(this).val().replace(/[^0-9.]/g, ''''));
// now cut the string with the allowed number for the integer and float parts
// integer part controlled with the int_num_allow variable
// float (or decimal) part controlled with the float_num_allow variable
var int_num_allow = 3;
var float_num_allow = 1;
var iof = $(this).val().indexOf(".");
if ( iof != -1 ) {
// this case is a mouse paste (probably also other events) with more numbers before the dot than is allowed
// the number can''t be "sanitized" because we can''t "cut" the integer part, so we just empty the element and optionally change the placeholder attribute to something meaningful
if ( $(this).val().substring(0, iof).length > int_num_allow ) {
$(this).val('''');
// you can remove the placeholder modification if you like
$(this).attr(''placeholder'', ''invalid number'');
}
// cut the decimal part
$(this).val($(this).val().substring(0, iof + float_num_allow + 1));
} else {
$(this).val($(this).val().substring(0, int_num_allow));
}
return true;
});

Answer 3

Creo que ustedes se han perdido las flechas de izquierda a derecha, borrar y retroceder.

 $(''.number'').keypress(function(event) {
if(event.which == 8 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46)
return true;
else if((event.which != 46 || $(this).val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57))
event.preventDefault();
});

Answer 4

Encontré esta manera de hacer esto,

$.validator.addMethod("currency", function (value, element) {
return this.optional(element) || /^/$(/d{1,3}(/,/d{3})*|(/d+))(/./d{2})?$/.test(value);
}, "Please specify a valid amount");

https://gist.github.com/jonkemp/9094324

Answer 5

HTML

<input type="text" onkeypress="return isFloatNumber(this,event)" />

Javascript

function isFloatNumber(item,evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode==46)
{
var regex = new RegExp(//./g)
var count = $(item).val().match(regex).length;
if (count > 1)
{
return false;
}
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

jsfiddle.net

Answer 6

Puede consultar el período en la misma declaración.

Además, debe utilizar el método val para obtener el valor del elemento.

Además, desea verificar el intervalo 48 a 57, no 47 a 59, de lo contrario también permitirá / : y ; .

$(''.number'').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});

Answer 7

Su código parece bastante bien pero demasiado complicado.

Primero, es $(this).val().indexOf , porque quiere hacer algo con el valor.

En segundo lugar, el event.which == 46 check está dentro de una cláusula if que solo se pasa cuando event.which != 46 , que nunca puede ser cierto.

Terminé con esto, que funciona: http://jsfiddle.net/VRa6n/3/ .

$(''.number'').keypress(function(event) {
if(event.which < 46
|| event.which > 59) {
event.preventDefault();
} // prevent if not number/dot
if(event.which == 46
&& $(this).val().indexOf(''.'') != -1) {
event.preventDefault();
} // prevent if already dot
});

Answer 8

Un complemento más, basado en la respuesta de Carlos Castillo.

https://github.com/nikita-vanyasin/jquery.numberfield.js

Agrega método al objeto jQuery:

$(''input.my_number_field'').numberField(options);

donde opciones es (puede pasar cualquiera o ninguna opción):

{
ints: 2, // digits count to the left from separator
floats: 6, // digits count to the right from separator
separator: "."
}

Answer 9

Usando JQuery.

$(document).ready(function()
{
//Only number and one dot
function onlyDecimal(element, decimals)
{
$(element).keypress(function(event)
{
num = $(this).val() ;
num = isNaN(num) || num === '''' || num === null ? 0.00 : num ;
if ((event.which != 46 || $(this).val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57))
{
event.preventDefault();
}
if($(this).val() == parseFloat(num).toFixed(decimals))
{
event.preventDefault();
}
});
}
onlyDecimal("#TextBox1", 3) ;
});

Answer 10

Usando jQuery y permitiendo flotaciones negativas:

// Force floats in ''.js_floats_only'' inputs
$(document).ready(function() {
$(''.js_floats_only'').each(function() {
// Store starting value in data-value attribute.
$(this).data(''value'', this.value);
});
});
$(document).on(''keyup'', ''.js_floats_only'', function() {
var val = this.value;
if ( val == ''-'' ) {
// Allow starting with ''-'' symbol.
return;
} else {
if ( isNaN(val) ) {
// If value is not a number put back previous valid value.
this.value = $(this).data(''value'');
} else {
// Value is valid, store it inside data-value attribute.
$(this).data(''value'', val);
}
}
});

Answer 11

$(''.number'').keypress(function(event){
if($.browser.mozilla == true){
if (event.which == 8 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 9 || event.keyCode == 16 || event.keyCode == 46){
return true;
}
}
if ((event.which != 46 || $(this).val().indexOf(''.'') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});

Esto funciona en todos los navegadores.

Answer 12

<input type="text" data-textboxtype="numeric" />
<script>
$(document).on(''keydown'', ''[data-textboxtype="numeric"]'', function (e) {
// Allow: backspace, delete, tab, escape, enter and . and -
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190, 109, 189]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don''t do anything
return true;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
return false;
}
return true;
});
</script>