将功能作为用户类型运行

Question

我有一个电话号码输入，我试图将破折号作为用户类型显示。

我希望该号码出现为555-555-5555。

该功能在大多数情况下都可以使用，但是直到输入整数后才输入破折号。我正在使用keyup函数，我认为可以解决这个问题，但没有运气。

有人对我要做的事情有任何建议，以使以数字中的用户类型输入破折号？

$('#phone').keyup(function() {
		$(this).val($(this).val().replace(/(d{3})-?(d{3})-?(d{4})/,'$1-$2-$3'))
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <label class="contact-label">Phone Number:</label>
  <input type="tel" class="contact_input" name="phone" id="phone">
</div>

Answer 1

我稍微修改了您的代码，以产生我认为阅读更容易的内容，但仍然可以完成工作。

我刚刚在每个.keyup()事件上评估了<input /> TAG值的长度，然后相应地增强了该值。看看下面的摘要：

- 更新 -

在有关退跨问题的评论后，我添加了几行代码，这些代码似乎可以解决该问题：

首先，我检查了backspace或删除.keyup()事件，以防止格式代码干扰校正数字中的错误。

我还添加了一些检查和一个全局formatFlag变量，以确保如果用户背面返回到3或6（通常会添加连字符的情况）（在其中添加连字符），则格式将在下一个.keyup()事件中正常恢复。

let formatFlag = false;
$(function(){
  $('#phone').keyup(function(evt) {
      
      let modifiedValue = $(this).val().replace(/-/g, "");
      
      if(evt.keyCode == 8 || evt.keyCode == 46) { //8 == backspace; 46 == delete
        
        //Checks whether the user backspaced to a hyphen index
        if(modifiedValue.length === 3 || modifiedValue.length === 6) { 
        
          //Checks whether there is already a hyphen
          if($(this).val().charAt($(this).val().length - 1) !== '-') {
          
            formatFlag = true; //Sets the format flag so that hyphen is appended on next keyup()
            
          } else {         
          
            return false; //Hyphen already present, no formatting necessary
            
          }
          
        } else {
        
          formatFlag = false;
          
        }
        
        return false; //Return if backspace or delete is pressed to avoid awkward formatting
      }
      
      if(!!formatFlag) {
      
        // This re-formats the number after the formatFlag has been set, 
        // appending a hyphen to the second last position in the string
        $(this).val($(this).val().slice(0, $(this).val().length - 1) + '-' + 
        $(this).val().slice($(this).val().length - 1));
        
        formatFlag = false; //Reset the formatFlag
      }
      
      if(modifiedValue.length % 3 == 0) {
      
        if(modifiedValue.length === 0 || modifiedValue.length >= 9){
        
          return false;
          
        } else {
        
          $(this).val($(this).val() + '-');
          return;
          
        }
      
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <label class="contact-label">Phone Number:</label>
  <input type="tel" class="contact_input" name="phone" id="phone" />
</div>