Question

我正在尝试使用java脚本在输入时将破折号插入到每个4th数字的html数字字段中。我在on-blur中执行此操作，而不是按键，按键等。但是当我尝试将函数更改为on-key-press/on-key-up个事件时，它没有给出预期的结果。

这是我使用的代码。

<html>
<head>
<script>
 function addDashes(f)
 {
   f.value = f.value.slice(0,4)+"-"+f.value.slice(4,8)+"-"+f.value.slice(8,12);
 }
</script>
</head>
  <body>
     Phone: <input type='text' name='phone' onblur='addDashes(this)' maxlength='12'><BR>
  </body>
</html>

我是'JavaScript'的初学者。我在哪里做错了？

Answer 1

这会奏效。它还支持“删除”号码。

但是，我建议您使用masking

$(document).ready(function () {
    $("#txtPhoneNo").keyup(function (e) {
      if($(this).val().length === 14) return;
      if(e.keyCode === 8 || e.keyCode === 37 || e.keyCode === 39) return;
      let newStr = '';
      let groups = $(this).val().split('-');
      for(let i in groups) {
       if (groups[i].length % 4 === 0) {
        newStr += groups[i] + "-"
       } else {
        newStr += groups[i];
       }
      }
      $(this).val(newStr);
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="txtPhoneNo" name='phone' maxlength='14'><BR>

如果您想要使用屏蔽的片段，请告诉我，我将非常乐意提供帮助。

Answer 2

给出文本框的ID，不需要模糊功能，只需在document.ready函数中写入。你的HTML专栏：

<input type='text' id="txtPhoneNo" name='phone' maxlength='12'><BR>

你的Jquery专栏：

$(document).ready(function () {
    $("#txtPhoneNo").keyup(function () {
                    if ($(this).val().length == 4) {
                        $(this).val($(this).val() + "-");
                    }
                    else if ($(this).val().length == 9) {
                        $(this).val($(this).val() + "-");
                    }
                    else if ($(this).val().length == 14) {
                        $(this).val($(this).val() + "-");
                    }
                });
});

希望它对你有所帮助。

Answer 3

Vanilla javascript演绎部分地受到Naman代码的启发，并具有删除和退格支持等更多功能。

HTML：

<input type="tel" id="phone">

香草JS：

const phone = document.getElementById('phone');

phone.addEventListener("keydown", (e) => {
    if(e.key === "Backspace" || e.key === "Delete") return;
    if(e.target.value.length === 4) {
        phone.value = phone.value + "-";
    }
    if(e.target.value.length === 9) 
        phone.value = phone.value + "-";
    }
    if(e.target.value.length === 14) {
        phone.value = phone.value + "-";
    }
})

如何在输入数字时将破折号添加到数字输入字段？

3 个答案: