HTML 文本框输入模式 0000000-0000

Question

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

0000000-0000

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

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

Answer 1

尝试使用 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" />

Answer 2

你可以使用 jquery.mask 来完成这个

更多信息Here

用法：

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

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

现场观看https://jsfiddle.net/n0oeu3p2/

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 和 regexp

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.

匹配

HTML 文本框输入模式 0000000-0000

HTML textbox input pattern 0000000-0000

html

javascript

jquery

frontend