HTML文本框输入模式 0000000-0000

Question

基本上我有一个HTML文本框，用户输入数字。我想自动在第7个数字后面加上一个-，就像这样的模式： 0000000-0000

 <input type="text" class="form-control width-160" name="value" required maxlength="10"/>

我很确定这需要使用正则表达式，但是我能直接在HTML中使用吗还是需要一些jQuery ？

- crystyxn

---

你知道你需要正则表达式，但是你到目前为止尝试了什么？ - evolutionxbox

请查看此链接：https://github.com/RobinHerbots/Inputmask。 - aseferov

嘿，为什么你要给我的答案点踩呢？它完全可以正常工作啊。 - user8003769

你不需要使用jQuery。 - cнŝdk

Answer 1

您可以使用 jquery.mask 来实现此功能。

更多信息请点击这里

用法：

<input type="text" class="phone" name="value"/>

$(document).ready(function(){
  $('.phone').mask('0000000-0000');
});

在这里可以实时查看 https://jsfiddle.net/n0oeu3p2/

- Ambrish Pathak

---

太棒了！非常容易使用。我选择这个作为我的答案！ - crystyxn

Answer 2

使用slice()方法，并将input length改为11。

$('input').on('input',function(){
var str = $(this).val().replace('-','');
if(str.length > 7)
$(this).val(str.slice(0,7)+'-'+str.slice(7,str.length))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control width-160" name="value" required maxlength="11" />

- prasanth

---

完全没有理由使用jQuery来完成这个任务。输入不仅限于数字，而且试图编辑“-”之前的部分会使输入几乎无法使用。 - RobG

好的回答，但我会选择Ambrish的回答，因为@RobG的观察。谢谢你们两个！ - crystyxn

Answer 3

<form action="javascript:alert('Corect!');">
  <input type="text" pattern="\d{7}-\d{4}" title="Should be of the format 0000000-0000"/>
</form>

完成了！只用了 HTML 和正则表达式

- user8003769

---

您必须直接按下回车键而不输入任何内容。 - user8003769

无论我输入什么，我总是得到“正确！” - RobG

您的浏览器不支持HTML5。 - user8003769

如果缺乏对某个特定功能的支持意味着浏览器“不支持HTML5”，那么所有正在使用的浏览器可能都处于同一艘船上。有多少浏览器支持每种输入元素及其所有功能？;-) - RobG

Answer 4

无需使用任何外部库，您可以使用onkeyup事件，并仅测试是否键入第7个字符，然后将-附加到该值。

以下是您需要的内容：

var changeIt = function changeIt(input) {
  if (input.value.length === 7) {
    input.value = input.value + "-";
  }
}

演示：

这是一个可工作的代码片段：

var changeIt = function changeIt(input) {
  if (input.value.length === 7) {
    input.value = input.value + "-";
  }
}

<input type="text" class="form-control width-160" name="value" required maxlength="12" onkeyup="changeIt(this)" pattern="[0-9]{7}-[0-9]{4}" />

同时在 pattern HTML 属性中使用正则表达式 [0-9]{7}-[0-9]{4}，以确保您的输入值与正则表达式 0000000-0000 匹配。

- cнŝdk