使用jQuery在日期<input>框中自动添加斜杠/符号

Question

我发现有几个问题但没有答案，所以我提出了问题。
如何在框中添加自动斜杠/符号，当输入/键入日期时？
例如：当键入02或任何日期、月份、年份数字时，jQuery将在输入框中的2个数字后自动添加/符号，如02/12/2016。
请查看jsfiddle示例：https://jsfiddle.net/rjkdd9j6/

HTML：

<input type="text" id="your-id" value="dd/mm/yy">

有没有jQuery或JS的简单解决方案？

- Aariba

---

</input> 不是 HTML 中的标签。 - undefined

@mlegg 请问有解决方案吗？ - undefined

Answer 1

这样的代码可以正常工作。也请查看附带的JSFiddle示例。

$( document ).ready(function() {
    $('#your-id').bind('keyup','keydown', function(event) {
    var inputLength = event.target.value.length;
    if(inputLength === 2 || inputLength === 5){
      var thisVal = event.target.value;
      thisVal += '/';
      $(event.target).val(thisVal);
    }
  })
});

这里提供了一个代码示例，可以帮助您限制表单输入。此外，您还可以使用像Jquery一样的输入掩码库（https://github.com/RobinHerbots/jquery.inputmask）。

- Ahmed Hawas

---

不错，但是当输入单个日期如2/12/2016时，显示的结果是2//12/2016，请问有什么解决办法吗？ - undefined

@Aariba 很酷。我还更新了代码，以防止退格键的影响：https://jsfiddle.net/ahmedhawas7/rjkdd9j6/3/ - undefined

好的，请更新答案。 - undefined

我可以在那里输入 14/46/67645789766。我觉得这不是预期的结果。 - undefined

@AhmedHawas，它也接受50/50/122244545。还有其他解决方案吗？ - undefined

Answer 2

为您的<input>框添加一个onkeydown事件处理程序，每当输入框的值的长度为2或5时，在其后附加一个“/”。

Fiddle: - https://jsfiddle.net/nuh4dy6j/

var input = document.querySelector('input');
input.addEventListener('keydown', ev => {
  var ipLength = ev.target.value.length;
  if(ipLength ===2 || ipLength ===5) {
    ev.target.value += '/';
  }
});

- Tarun Garg

---

请提供一个带有jQuery的jsfiddle示例。 - undefined

https://jsfiddle.net/nuh4dy6j/ - undefined

这个功能不允许你在斜杠（/）之前使用退格键，同时也允许在字符串末尾插入任意多的字符而无需再添加斜杠（/）。 - undefined

Answer 3

你可以这样做，试一试

$(document).ready(function() {
      $("#inputDate").keyup(function(){
            if ($(this).val().length == 2){
                    $(this).val($(this).val() + "/");
            }else if ($(this).val().length == 5){
                  $(this).val($(this).val() + "/");
            }
       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputDate" type="text" />

- Shakir Ahamed

---

无法正常工作... - undefined

它正在工作，对吧？点击运行代码片段并检查一下，@Aariba - undefined