代码之家 › 专栏 › 技术社区 › Stephen R

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

formatting html jquery javascript

Stephen R · 技术社区 · 6 年前

注:我知道这是 相像的 对于其他问题,但出于语义和其他原因(例如易于在iOS上输入),我特别希望HTML输入 type="number" .这就是问题所在。。。。

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

我可以在值中手动添加逗号,没有任何问题(我主要在Firefox ~ 59中进行测试);但每当我尝试让JavaScript添加逗号时,该字段就会被清空。有人知道怎么做吗?

(注意,我在这里使用numbers.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表单处理脚本提交带有逗号的数字只会删除逗号,并将未格式化的数字放入DB.Sweet!)~~

3 回复 | 直到 6 年前

dave 6 年前

我不熟悉数字。js但如果我这么做的话, ~~我只需将数值保存为数据属性,然后使用 .toLocaleString ,请记住,您可以在 text 和 number 类型,以便显示逗号~~ :

看到iOS的问题,我相信以下方法会奏效。可以克隆元素,然后将原始元素设置为 文本 输入然后,获取原始元素的位置,并将新元素设置为绝对位于原始元素上方。现在,将数字输入设置为 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,]*" />

Stephen R 6 年前

注意:我留下了这个原始答案,以防将来这里有什么有用的东西;但请看我的另一个答案,这是对原始问题的完整解决方案。

我没有办法完全做我想做的事。在不同的浏览器中,用输入“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>">

总的来说,对于这样一个常见的用例,可能需要做太多的工作。我希望浏览器制造商尽快找到解决方案!需要一种简单、标准的方式来在字段中显示数字。

Stephen R 6 年前

我的最后一个函数,基于Dave的答案。Dave的功能不全(虽然是有效的概念证明)。这将处理name属性(这对于表单提交是必需的),并相对于原始输入而不是页面定位输入覆盖(如果调整窗口大小,则会阻止内容变为catywanps)。

~~重要提示:使用此选项时,必须使用 <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>