输入类型数字使用逗号 - 将点更改为逗号

Question

我正在使用<input type="number"...，但我不能使用逗号？但我无法解决将其更改为<input type="text" 以使用它的问题。在它之后，用户也可以在输入中输入一些字母并产生一些问题，因为该输入与另一个输入相加。 有什么建议？

Answer 1

您想在输入类型 number 中使用 1.2 或 2.3 之类的数字吗？ 然后你可以使用 step 属性。阅读下面的代码

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

Answer 2

我希望它对你有用 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> 

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 链接在这里Referance Link

Answer 3

使用这个 javascript 和 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;
            }
        }
    });

这是我的 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">