¿Estoy usando <input type="number"... y no puedo usar una coma? Pero no puedo resolver el problema al cambiarlo a <input type="text" para usarlo. Después, el usuario también podría escribir algunas letras en la entrada y causar algunos problemas porque esa entrada se suma con otra. ¿Alguna sugerencia?

0
proofzy 14 ene. 2017 a las 12:56

3 respuestas

La mejor respuesta

Use este script javascript y jquery:

        function transformTypedChar(charStr) {
        return charStr == "," ? "." : charStr;
        // HERE WE SET WHAT WE ARE GOING TO CHANGE
    }

    function getInputSelection(el) {
        var start = 0, end = 0, normalizedValue, range,
            textInputRange, len, endRange;

        if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
            start = el.selectionStart;
            end = el.selectionEnd;
        } else {
            range = document.selection.createRange();

            if (range && range.parentElement() == el) {
                len = el.value.length;
                normalizedValue = el.value.replace(/\r\n/g, "\n");

                // Create a working TextRange that lives only in the input
                textInputRange = el.createTextRange();
                textInputRange.moveToBookmark(range.getBookmark());

                // Check if the start and end of the selection are at the very end
                // of the input, since moveStart/moveEnd doesn't return what we want
                // in those cases
                endRange = el.createTextRange();
                endRange.collapse(false);

                if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                    start = end = len;
                } else {
                    start = -textInputRange.moveStart("character", -len);
                    start += normalizedValue.slice(0, start).split("\n").length - 1;

                    if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                        end = len;
                    } else {
                        end = -textInputRange.moveEnd("character", -len);
                        end += normalizedValue.slice(0, end).split("\n").length - 1;
                    }
                }
            }
        }

        return {
            start: start,
            end: end
        };
    }

    function offsetToRangeCharacterMove(el, offset) {
        return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
    }

    function setInputSelection(el, startOffset, endOffset) {
        el.focus();
        if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
            el.selectionStart = startOffset;
            el.selectionEnd = endOffset;
        } else {
            var range = el.createTextRange();
            var startCharMove = offsetToRangeCharacterMove(el, startOffset);
            range.collapse(true);
            if (startOffset == endOffset) {
                range.move("character", startCharMove);
            } else {
                range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset));
                range.moveStart("character", startCharMove);
            }
            range.select();
        }
    }
// change this one ID so script can work for that input    
    $("#changeMe").keypress(function(evt) {
        if (evt.which) {
            var charStr = String.fromCharCode(evt.which);
            var transformedChar = transformTypedChar(charStr);
            if (transformedChar != charStr) {
                var sel = getInputSelection(this), val = this.value;
                this.value = val.slice(0, sel.start) + transformedChar + val.slice(sel.end);

                // Move the caret
                setInputSelection(this, sel.start + 1, sel.start + 1);
                return false;
            }
        }
    });

Y esta es mi entrada HTML:

<input type="text" autocomplete="off" step="any" font="red" style="width:120%" placeholder="changeMe"  name="changeMe" class="input-sm form-control" id="changeMe" value="Change dot to comma">
0
proofzy 22 abr. 2018 a las 18:16

Espero que funcione para ti Código HTML

<span>Float</span>
<input type="text" name="numeric" class='allownumericwithdecimal'>
<div>Numeric values only allowed  (With Decimal Point) </div>    
    <br/>   <br/>   <br/>

 <span>Int</span>
<input type="text" name="numeric" class='allownumericwithoutdecimal'>
<div>Numeric values only allowed  (Without Decimal Point) </div> 

Código JavaScript

$(".allownumericwithdecimal").on("keypress keyup blur",function (event) {
            //this.value = this.value.replace(/[^0-9\.]/g,'');
     $(this).val($(this).val().replace(/[^0-9\.]/g,''));
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }
        });

 $(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) {    
           $(this).val($(this).val().replace(/[^\d].+/, ""));
            if ((event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }
        });

JS Fiddler Link Here Enlace de referencia

0
Mohd Aman 14 ene. 2017 a las 10:10

¿Desea usar números como 1.2 o 2.3 en su número de tipo de entrada? Entonces puedes usar el atributo de paso. Lee el código a continuación

<input type="number" step="0.01">
1
mdck 14 ene. 2017 a las 10:10