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

Posted 2023-03-31

【中文标题】输入类型数字使用逗号 - 将点更改为逗号

【英文标题】：Input type number usage comma - change dot to comma

【发布时间】：2017-01-14 09:56:13

【问题描述】：

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

【问题讨论】：

请看这个解决方案***.com/questions/15303940/…

【参考方案1】：

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

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

【讨论】：

所以步骤必须是这样的：step="0.01" 我已经编辑了我的第一条评论，检查一下

<input type="number" step="0.01">我放了，还是不能用：55,55

不能使用 55,55 是什么意思？你能解释一下你想做什么吗？

试着输入一些数字，一些数字；例如 50,06。在我国，我们使用逗号 (,) 表示数字。我们不使用点。

我使用的是 firefox developerper edition 52，并使用逗号而不是点输入类型号。检查截图dot和comma

【参考方案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

【讨论】：

嘿先生。但我需要使用带有 (,) 的数字。示例：22,06

嘿@proofzy，你必须为他们实现一个'javascript函数'

@proofzy 在 keypres 上试试这个代码 function isNumber(evt) var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode(key); if (key.length == 0) return; var regex = /^[0-9.,\b]+$/; if (!regex.test(key)) theEvent.returnValue = false; if (theEvent.preventDefault) theEvent.preventDefault();

或者试试这个，完美运行和测试 html <input type="text" id="txt" onkeyup="addComma(this);" /> JavaScript function addComma(txt.value = this.value.replace(/[^\d,]/g,''))

好吧，输入需要保持为数字...显然chrome不允许我用逗号输入数字...

【参考方案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">