Question

注意：我知道这与其他问题类似，但由于语义和其他原因（例如在iOS上易于输入），我特别希望HTML输入为import { OnDestroy } from '@angular/core'; import { Subject } from 'rxjs/Subject'; export class Component implements OnDestroy { componentDestroyed: Subject<boolean> = new Subject(); constructor() { } function() { this.service.serviceFunction .takeUntil(this.componentDestroyed) .subscribe((incomingObservable: Type) => { this.variable = incomingObservable; }); } ngOnDestroy() { this._cdRef.detach(); //If you use change dectector this.componentDestroyed.next(true); this.componentDestroyed.complete(); }。这就是问题所在......

我尝试设置HTML表单，以便数字字段显示数千个逗号 - 例如＆＃34; 10,000,000＆＃34;而不是＆＃34; 10000000＆＃34;。我想设置它以便该字段显示逗号，但当它获得焦点进行实际编辑时，逗号就会消失。

我可以手动为这个值添加逗号而没有任何问题（我主要在Firefox~59中测试）;但是每当我尝试让JavaScript添加逗号时，该字段就会被删除。有谁知道如何使这项工作？

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

这就是我所拥有的：

type="number"

示例HTML输入：

$(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表单处理脚本提交逗号的数字只会删除逗号并将未格式化的数字放入数据库。甜蜜！）~~

Answer 1

我不熟悉numeral.js，但如果我这样做，~~我只是将数值保存为数据属性，然后用.toLocaleString格式化，请记住你在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

注意：我将离开这个原始答案，以防万一这里有用的东西;但请参阅我的其他答案，这是原始问题的完整解决方案。

我发现没办法做我想做的事。在输入“类型”的情况下，在不同的浏览器中过于不一致;并且在iOS上无论如何都不起作用（这是90％的观点）。但是，我确实“非常接近”，以下工作顺利进行。（注意这使用numeral.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>">

总的来说，WAAAY为这样一个常见的用例做了太多工作。我希望浏览器制造商尽快找到解决方案！需要一种简单，标准的方式来显示字段中的数字。

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>

HTML＆＃34;数字＆＃34;输入不允许JavaScript显示逗号

3 个答案: