Question

我正在尝试输出用户输入的值1234567890以显示为123-456-7890。使用下面的代码，输出是预期的，但是当您尝试编辑数字时，会出现奇怪的问题。有人可以帮忙。

＆＃13;

$("input[type='tel']").keyup(function() {
  if (this.value.length === 10) {
    var number = this.value
    this.value = number.substring(0, 3) + '-' + number.substring(3, 6) + '-' + number.substring(6, 10)
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="form-control" placeholder="e.g.: 111-222-3333" type="tel" maxlength="10" />

＆＃13;

Answer 1

问题是您没有从之前的值中删除“ - ”。因此，当触发keyup事件时，该值具有 - 来自之前的keyup parse事件。

为什么不从字符串中删除“ - ”，然后运行子字符串代码？

看起来像是

$("input[type='tel']").keyup(function() {
  if (this.value.length === 10) {
    var number = this.value.replace('-', '');
    this.value = number.substring(0, 3) + '-' + number.substring(3, 6) + '-' + number.substring(6, 10)
  }
});

Answer 2

有更简单的方法可以实现这一目标，但我希望这会有所帮助。

$("input[type='tel']").keyup(function() {
  
  
   if (this.value.length == 10) {
       var number = this.value
    this.value = number.substring(0, 3) + '-' + number.substring(3, 6) + '-' + number.substring(6, 10)
    }
    else if (this.value.indexOf('-') >= 0) 
    {   
        if (this.value.length != 12) {
        this.value = this.value.replace( /-/g, '' );
          }
    }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input class="form-control" placeholder="e.g.: 111-222-3333" type="tel" maxlength="10" />

jquery电话格式

2 个答案: