HTML“数字”输入不允许 JavaScript 显示逗号

Question

注意：我知道这与其他问题相似，但出于语义和其他原因（例如 iOS 上的输入方便），我特别希望 HTML 输入为 type="number"。这就是问题所在......

我正在尝试设置一个 HTML 表单，以便数字字段显示数千个逗号——例如“10,000,000”而不是“10000000”。我想设置它，以便该字段显示逗号，但是当它获得实际编辑的焦点时，逗号消失了。

我可以手动将逗号添加到值中，没有任何问题（我主要在 Firefox ~59 中进行测试）；但是每当我尝试让 JavaScript 添加逗号时，该字段就会被空白。有谁知道如何进行这项工作？

（注意，我在这里使用 Numerals.js 进行格式化...http://numeraljs.com/）

这是我所拥有的：

$(document).ready(function(){
    var numberFields = $("input[type=number]");
    numberFields.each( function(){
        $(this).val( numeral( $(this).val() ).format('0') );
    });
    numberFields.focus( function(){
        $(this).val( numeral( $(this).val() ).format('0') );
    });
    numberFields.blur( function(){
        $(this).val( numeral( $(this).val() ).format('0,0') );
    });
});

HTML 输入示例：

<input name="myField" value="0" type="number">

（顺便说一句——而且很方便，我已经确认向 HTML 表单处理脚本提交带逗号的数字只会删除逗号并将未格式化的数字放入数据库中。太好了！）

Answer 1

我不熟悉 numeric.js，但如果我这样做，我只会将数值保存为数据属性，然后使用 .toLocaleString 格式化，记住你有 switch text 和 number 类型之间，以便您可以显示逗号：

看到 iOS 的问题，我相信以下方法会起作用。您可以克隆元素，然后将原始元素设置为 text 输入。然后，获取原始元素的位置，并将新元素设置为绝对定位在原始元素之上。现在，将数字输入设置为opacity: 0，这样你就不会看到它，但是当他们点击时，它会点击你的克隆。单击克隆时，将其设置为opacity: 1，当它模糊时，将原始输入设置为克隆输入的值，但使用toLocaleString。我检查了它在 Firefox 中是否可以工作，理论上它应该也可以在 iOS 上工作。

$(document).ready(function(){
        var $clones = [];
        var numberFields = $("input[type='number']");
        numberFields.each(function(i){
            var $clone = $(this).clone();
            $(this).attr('type', 'text');
            var destination = $(this).offset();
            var width = $(this).width();
            $clones.push($clone.css({
                position: 'absolute',
                top: destination.top,
                left: destination.left,
                opacity: '0',
                width: width
            }));
            $(this).after($clone);
            var that = this;
            $clone.on('focus', function() {
                $(this).css('opacity', '1');
            });
            $clone.on('blur', function() {
                $(this).css('opacity', '0');
                $(that).val('' + $(this).val() ? parseInt($(this).val()).toLocaleString() : '');
            });
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" pattern="[0-9,]*" />

Answer 2

注意：我将留下这个原始答案，以防万一这里的东西在路上有用；但请参阅我的另一个答案，这是对原始问题的完整解决方案。

我找不到完全按照我的意愿行事的方法。在不同的浏览器中，输入“type”的futzing太不一致了；并且无论如何在iOS上都不起作用（这是90％）。但是，我确实“非常接近”地顺利完成了以下工作。 （注意这里使用了 numeric.js 库进行格式化）：

JavaScript：

<script>
$(document).ready(function(){
    var intFields = $("input[data-format=integer]");
    intFields.each( function(){
        $(this).attr( "pattern", "[0-9,]*" );
        $(this).val( numeral( $(this).val() ).format('0,0') );
    });
    intFields.focus( function(){
        $(this).val( numeral( $(this).val() ).format('0') );
    });
    intFields.blur( function(){
        $(this).val( numeral( $(this).val() ).format('0,0') );
    });
    $("form#myForm").on( "submit", function(){
        intFields.each( function() {
            $(this).val( numeral( $(this).val() ).format('0') );
        } );
        return true;
    } );
});
</script>

HTML：

<input type="text" data-format="integer" name="some_number" value="12345678>">

总的来说，对于这样一个常见的用例来说，工作量太大了。我希望浏览器制造商尽快提出解决方案！需要有一种简单、标准的方式在字段中显示数字。

Answer 3

我的最终功能，基于戴夫的回答。 Dave 的功能并不完整（尽管是有效的概念证明）。这会处理 name 属性（这是表单提交所必需的），并将输入叠加层相对于原始输入定位，而不是页面（如果调整窗口大小，这会防止事情发生 catywampus）。

重要提示：使用此功能时，您的数字字段必须使用<label>...</label><input>，而不是<label>...<input></label> 已修复！：

$(document).ready(function() {
      format_integers();
    });

    /**
     * Any form inputs with type=number and data-format=integer will display contents with commas when input not in focus.
     * @param container string to be used as jQuery search. Defaults to 'body'; but can be any specific element
     */
    function format_integers(container) {
      container = (typeof container !== 'undefined') ? container : 'body';
      var $wrapper = $('<span>').css({
        position: 'relative',
        display: 'inline-block',
        padding: 0
      });
      $(container + " input[type='number'][data-format=integer]").each(function() {
        var $clone = $(this).clone();
        var $parentLabel = $(this).parent('label');
        if( $parentLabel.length !== 0 ) {
            $parentLabel.css( 'display', 'inline-flex' );
            $clone.css( 'order', 1 );
            $(this).css( 'order', 2 );
        }
        $(this).wrapAll($wrapper).css({
            position: 'absolute',
            top: 0,
            left: 0,
            opacity: 0
          })
          .attr('pattern', '[0-9]*');
        $clone.removeAttr('name class id pattern')
          .attr('type', 'text')
          .attr('tabindex', -1)
          .css('width', $(this).width)
          .val($(this).val() ? parseInt($(this).val()).toLocaleString() : '');
        $(this).before($clone);
        $(this).on('focus', function() {
          $(this).css('opacity', '1');
        });
        $(this).on('blur', function() {
          $(this).css('opacity', '0');
          $clone.val($(this).val() ? parseInt($(this).val()).toLocaleString() : '');
        });
      });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>Integer Input:&nbsp; <input type="number" data-format="integer" name="test" id="num_input" value="123456789" /></label><br>
  <label for="num_input2">Integer Input: </label>
  <input type="number" data-format="integer" name="test2" id="num_input2" value="10000000" /><br>
  <label>Textarea <textarea>Something to focus other than the number fields</textarea></label>
</form>