Question

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

0000000-0000

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

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

Answer 1

您可以将jquery.mask用于此

更多信息Here

用法：

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

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

现场直播https://jsfiddle.net/n0oeu3p2/

Answer 2

尝试使用slice()并更改input length是11

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

完成！仅限html和regexp

Answer 4

无需使用任何外部库，您可以使用onkeyup事件，只需测试我们是否输入第7个字符-附加值。

以下是您的需求：

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

<强>演示：

这是一个有用的代码片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

HTML文本框输入模式0000000-0000

4 个答案: