87407607 2019-04-20
js代码有一百多行。
先上效果图
html代码
日期: <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期">
设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件。
js代码
这里应用了jQuery的库, 主要用于选择元素和绑定事件。
代码如下:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></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事件发生时,键盘上的字符还没有输入到输入框中,这很重要。如果需要,我们在程序中就可以阻止不合适的字符输入。
1.首先从事件对象event中取得keyCode值,判断为数字时,将数字后面的下划线删除一位。
2.keyCode值代表删除键时,删除数字,添加一位下划线。
3.keyCode的其他情况返回false,阻止字符的输入。
上面一二步会用到setTimeout函数,在其中执行某些操作。 使用这个函数是因为keyup事件中按键字符实际还没有作用到文本框中,setTimeout中的操作可以解决这个问题。
另外代码中还有一个很重要的方法 resetCursor,程序中多次调用这个方法来把光标设置到合适的输入位置。
代码如下:
//设置光标到正确的位置 function resetCursor(elem) { var value = elem.value; var index = value.length; //当用户通过选中部分文字并删除时,此时只能将内容置为初始格式洛。 if (elem.value.length !== dateStr.length) { elem.value = dateStr; } //把光标放到第一个_下划线的前面 //没找到下划线就放到末尾 var temp = value.search(/_/); index = temp > -1 ? temp : index; setCursor(elem, index); }
完整的js代码贴在下面咯。
代码如下:
$(function(){ var inputs = $(".hhm-dateInputer"); var dateStr = "____-__-__"; inputs.each(function(index,elem){ var input = $(this); input.on("keydown",function(event){ var that = this; //当前触发事件的输入框。 var key = event.keyCode; var cursorIndex = getCursor(that); //输入数字 if(key >= 48 && key <= 57){ //光标在日期末尾或光标的下一个字符是"-",返回false,阻止字符显示。 if(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;} //字符串中无下划线时,返回false if(that.value.search(/_/) === -1){return false;} var fron = that.value.substring(0,cursorIndex); //光标之前的文本 var reg = /(\d)_/; setTimeout(function(){ //setTimeout后字符已经输入到文本中 //光标之后的文本 var end = that.value.substring(cursorIndex,that.value.length); //去掉新插入数字后面的下划线_ that.value = fron + end.replace(reg,"$1"); //寻找合适的位置插入光标。 resetCursor(that); },1); return true; //"Backspace" 删除键 }else if( key == 8){ //光标在最前面时不能删除。 但是考虑全部文本被选中下的删除情况 if(!cursorIndex && !getSelection(that).length){ return false;} //删除时遇到中划线的处理 if(that.value.charAt(cursorIndex -1 ) == "-"){ var ar = that.value.split(""); ar.splice(cursorIndex-2,1,"_"); that.value = ar.join(""); resetCursor(that); return false; } setTimeout(function(){ //值为空时重置 if(that.value === "") { that.value = "____-__-__"; resetCursor(that); } //删除的位置加上下划线 var cursor = getCursor(that); var ar = that.value.split(""); ar.splice(cursor,0,"_"); that.value = ar.join(""); resetCursor(that); },1); return true; } return false; }); input.on("focus",function(){ if(!this.value){ this.value = "____-__-__"; } resetCursor(this); }); input.on("blur",function(){ if(this.value === "____-__-__"){ this.value = ""; } }); }); //设置光标到正确的位置 function resetCursor(elem){ var value = elem.value; var index = value.length; //当用户通过选中部分文字并删除时,此时只能将内容置为初始格式洛。 if(elem.value.length !== dateStr.length){ elem.value = dateStr; } var temp = value.search(/_/); index = temp> -1? temp: index; setCursor(elem,index); //把光标放到第一个_下划线的前面 //没找到下划线就放到末尾 } }); 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(); } }
结束语
这个插件可能还有一些需要完善的地方。
缺少通过js调用为元素绑定此插件的接口
插件可能有些bug
上面的代码如果有任何问题,请大家不吝赐教。
以上就是本文的全部内容了,希望大家能够喜欢。