我有一个电话号码输入,我试图让破折号出现在用户输入的数字中。
我希望这个数字显示为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>
&#13;
答案 0 :(得分: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>