Input type number usage comma - change dot to comma

Question

I'm using <input type="number"..., and I can't use comma? But I can't solve problem with changing it to <input type="text" to use it. After it user could type some letters in input too and make some problems because that input is summed with other one. Any suggestions?

Answer 1

You want to use numbers like 1.2 or 2.3 in your input type number ? Then you can use the step attribute. Read the code below

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

Answer 2

I hope it will work for you HTML Code

<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> 

JavaScript code

$(".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 Referance Link

Answer 3

Use this javascript and jquery script:

        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;
            }
        }
    });

And this is my HTML input:

<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">