Question

我有一个电话号码输入，我试图让破折号出现在用户输入的数字中。

我希望这个数字显示为555-555-5555。

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

有没有人建议我在用户输入数字时输入破折号需要做什么？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我稍微修改了你的代码以产生一些我认为更容易阅读的东西，但仍然可以完成这项工作。

我刚评估了每个<input />事件的.keyup()标记值的长度，然后相应地增加了值。看一下下面的代码：

- 更新 -

在关于退格问题的评论之后，我添加了几行似乎可以解决问题的代码：

首先，我检查了退格或删除.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>

获取以用户类型运行的功能

1 个答案: