在日期字段中自动插入斜杠"/"的最佳方法是什么

Question

我正在尝试添加输入日期字段的功能,以便当用户输入数字时,斜杠"/"会自动添加.

所以假设我有以下html:

<input type="text" id="fooDate" />

假设我有以下javascript:

var dateField = document.getElementById("fooDate");
dateField.onkeyup = bar;

应该bar是什么？

到目前为止,最好的谷歌搜索结果是:

function bar(evt)
{
    var v = this.value;
    if (v.match(/^\d{2}$/) !== null) {
        this.value = v + '/';
    } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
        this.value = v + '/';
    }

}

谢谢!

另外 - 我知道在你打字的时候输入斜线.滚动它:p

Answer 1

更新/编辑:显然,目前最简单的解决方案是使用广泛的HTML5支持<input type="date" name="yourName">.

对于抱怨它不能容纳退格或粘贴的人,我修改了原文:

//Put our input DOM element into a jQuery Object
var $jqDate = jQuery('input[name="jqueryDate"]');

//Bind keyup/keydown to the input
$jqDate.bind('keyup','keydown', function(e){

  //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
    if(e.which !== 8) { 
        var numChars = $jqDate.val().length;
        if(numChars === 2 || numChars === 5){
            var thisVal = $jqDate.val();
            thisVal += '/';
            $jqDate.val(thisVal);
        }
  }
});

`

工作小提琴:https://jsfiddle.net/ChrisCoray/hLkjhsce/

Answer 2

这是一种简单的方法：

Date: <input name=x size=10 maxlength=10  onkeyup="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')">

这是一个小提琴：https://jsfiddle.net/y6mnpc1j/

Answer 3

处理退格、删除、粘贴、长按。

let $jqDate = $('.date-slashes');

$jqDate.bind('keyup', function(ev) {
  if (ev.which !== 8) {
    let input = $jqDate.val();
    let out = input.replace(/\D/g, '');
    let len = out.length;

    if (len > 1 && len < 4) {
      out = out.substring(0, 2) + '/' + out.substring(2, 3);
    } else if (len >= 4) {
      out = out.substring(0, 2) + '/' + out.substring(2, 4) + '/' + out.substring(4, len);
      out = out.substring(0, 10)
    }
    $jqDate.val(out)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input name="dob" class="date-slashes" type="tel" maxlength="10" placeholder="mm/dd/yyyy">

Answer 4

尝试使用这个插件： http: //digitalbush.com/projects/masked-input-plugin/ 它与 jquery 一起使用。