在不更改值的情况下格式化输入类型文本答案

【问题标题】：Format Input Type Text without changing the Value在不更改值的情况下格式化输入类型文本
【发布时间】：2016-11-03 11:38:30
【问题描述】：

是否可以在不实际更改值本身的情况下格式化 Input 元素的文本值。例如，如果我输入以下格式的 ID 号：

19801010-1234

我希望值为 198010101234，但是当输入超过 8 个字符时，应该显示连字符。我正在使用 javascript 和 nodejs。

这是我目前拥有的：

HTML

<input id="ssn"
       className= {styles.input}
       type="input"
       value= {this.format(personalNumber)}
       placeholder={translations.personalNumber}
       onChange={this.onChange} />

format(value){
    if(value && value.length>8)
        return value.slice(0, 8) + " - " + value.slice(8);
    return value;
}

我正在使用 react ，上面当然会改变值本身以包含一个连字符，我希望我可以避免。

【问题讨论】：

向我们展示您已经尝试过的内容
@Julian Stark 完成！
这是不可能的。如果您检查类似的实现（例如 Stack Overflow 的标签编辑器），您会看到它们实际上显示 HTML 并将实际值存储在其他地方。

标签： javascript html

【解决方案1】：

试试这个：

<input type="text" id="num"> <span></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    function formatVal(num) {
        num.length == 8 ? $('#num').val(num+'-') : '';
    };

    function origVal(num) {
        $('span').html(num.replace('-', ''));
    }

    $('#num').keypress(function() {
        formatVal($(this).val());
        origVal($('#num').val());
    });
</script>

可能不是最好的解决方案。但它有效

jsfiddle demo

【讨论】：