js代码有一百多行。
先上效果图
html代码
日期： <input type="text" placeholder="请输入日期">
设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件。
js代码
这里应用了jQuery的库， 主要用于选择元素和绑定事件。
复制代码 代码如下:
<script src=""></script>
因为有大量的获取和设置光标位置操作，用到了上一篇博客介绍的几个工具函数。
复制代码 代码如下:
//获取光标位置
function getCursor(elem) {
//IE 9 ，10，其他浏览器
if (elem.selectionStart !== undefined) {
return elem.selectionStart;
} else { //IE 6,7,8
var range = document.selection.createRange();
range.moveStart("character", -elem.value.length);
var len = range.text.length;
return len;
}
}
//设置光标位置
function setCursor(elem, index) {
//IE 9 ，10，其他浏览器
if (elem.selectionStart !== undefined) {
elem.selectionStart = index;
elem.selectionEnd = index;
} else { //IE 6,7,8
var range = elem.createTextRange();
range.moveStart("character", -elem.value.length); //左边界移动到起点
range.move("character", index); //光标放到index位置
range.select();
}
}
//获取选中文字
function getSelection(elem) {
//IE 9 ，10，其他浏览器
if (elem.selectionStart !== undefined) {
return elem.value.substring(elem.selectionStart, elem.selectionEnd);
} else { //IE 6,7,8
var range = document.selection.createRange();
return range.text;
}
}
//设置选中范围
function setSelection(elem, leftIndex, rightIndex) {
if (elem.selectionStart !== undefined) { //IE 9 ，10，其他浏览器
elem.selectionStart = leftIndex;
elem.selectionEnd = rightIndex;
} else { //IE 6,7,8
var range = elem.createTextRange();
range.move("character", -elem.value.length); //光标移到0位置。
//这里一定是先moveEnd再moveStart
//因为如果设置了左边界大于了右边界，那么浏览器会自动让右边界等于左边界。
range.moveEnd("character", rightIndex);
range.moveStart("character", leftIndex);
range.select();
}
}
------------------------- Boom! -----------------------
先讲讲主要的思路。 其实是可以画个图这里的，不过我都不晓得该怎么画，大家提提意见。
首先找到类名为 hhm-dateInputer的元素。
给它绑定两个事件处理函数。 keydown、focus 、blur
focus
判断如果input元素内容为空，那么设置其初始值为"____-__-__"
blur (感谢下面评论里小伙伴的建议，加上这个事件更加完美)
判断如果input元素内容为初始值"____-__-__"，将其值置为空""
keydown
为什么不是keyup,而是keydown: 我们知道，keydown事件发生时，键盘上的字符还没有输入到输入框中，这很重要。如果需要，我们在程序中就可以阻止不合适的字符输入。