HTML 文本框输入模式 0000000-0000答案

【问题标题】：HTML textbox input pattern 0000000-0000HTML 文本框输入模式 0000000-0000
【发布时间】：2017-05-15 08:22:32
【问题描述】：

基本上我有一个 HTML 文本框，用户输入数字。我想要的是在第 7 位之后自动放置一个 - 基本上有这个模式：

0000000-0000

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

我很确定我需要为此使用正则表达式，但我可以直接在 HTML 中使用它还是需要一些 jQuery？

【问题讨论】：

你知道你需要正则表达式，但到目前为止你尝试过什么？
查看https://github.com/RobinHerbots/Inputmask
嘿，为什么你不赞成我的回答，它工作正常
你不需要使用 jQuery。

标签： javascript html jquery frontend

【解决方案1】：

您可以为此使用jquery.mask

更多信息Here

用法：

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

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

在这里直播https://jsfiddle.net/n0oeu3p2/

【讨论】：

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

【解决方案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" />

【讨论】：

完全没有理由为此使用 jQuery。输入不限于数字，尝试编辑“-”之前的部分会使输入几乎无法使用。
很好的答案，但由于@RobG 的观察，我会选择 Ambrish 的答案。谢谢你们！

【解决方案3】：

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

完成！仅使用 html 和正则表达式

【讨论】：

你必须直接按回车而不输入任何内容
无论我输入什么，我总是得到“正确！”。
您的浏览器不支持html5
如果缺乏对特定功能的支持意味着浏览器“不支持 HTML5”，那么很可能所有正在使用的浏览器都在同一条船上。有多少支持每种类型的输入元素及其所有功能？ ;-)

【解决方案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 + "-";
  }
}

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

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

【讨论】：