获取运行作为用户类型的功能

Question

我有一个 phone 数字输入，我试图让破折号在用户键入时出现在数字中。

我希望号码显示为 555-555-5555。

该功能在大部分情况下都有效，但只有在输入整数后才会输入破折号。我正在使用 keyup 函数，我认为它可以解决这个问题，但没有成功。

对于我必须做什么才能在用户输入数字时输入破折号有什么建议吗？

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

<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 /> 标签值的长度，然后相应地增加了该值。看看下面的片段：

--更新--

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

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

获取运行作为用户类型的功能

Getting function to run as user types

javascript

jquery

function

keyup

获取 运行 作为用户类型的功能

Getting function to run as user types

javascript

jquery

function

keyup

获取运行作为用户类型的功能