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

标签 javascript html

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

假设我有以下 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

最佳答案

更新/编辑:显然,当今广泛支持 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);
        }
  }
});

`

工作 fiddle :https://jsfiddle.net/ChrisCoray/hLkjhsce/

关于javascript - 在日期字段中自动插入斜杠 '/' 的最佳方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5005877/

相关文章:

javascript - ng-repeat 基于下拉选择或搜索输入

java - :each in <select> HTML tag. Thymeleaf 和 Spring 出现问题

html - 使用 CSS 设置样式的按钮元素在 IE6 中不显示背景图像

javascript - 如果 html 站点中没有事件表单,则按 Enter 键发出警报

JavaScript:将base64解码为二进制数据

javascript - 是否可以在背景中放置 Canvas 并在其上放置其他元素?

javascript - ScrollTo:定位导航栏中的特定按钮

javascript - HTML 5 : remove colour from canvas at mouse click position

html - 水平制表符箭头对齐问题

javascript - 我不能用 jquery 以正确的方向扩展 div?