javascript - 格式化输入类型文本而不更改值

是否可以在不实际更改值本身的情况下格式化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} />

JS

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

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

最佳答案

尝试这个：

<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

关于javascript - 格式化输入类型文本而不更改值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40400540/