jQuery实现简单的日期输入格式化控件


Posted in Javascript onMarch 12, 2015

js代码有一百多行。

先上效果图

jQuery实现简单的日期输入格式化控件

 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

上面的代码如果有任何问题,请大家不吝赐教。

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
Javascript数据结构与算法之列表详解
Mar 12 #Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 #Javascript
基于jquery实现的自动补全功能
Mar 12 #Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 #Javascript
window.open()实现post传递参数
Mar 12 #Javascript
js运动动画的八个知识点
Mar 12 #Javascript
js实现最短的XML格式化工具实例
Mar 12 #Javascript
You might like
smarty缓存用法分析
2014/12/16 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
详解Python self 参数
2019/08/30 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python实现猜拳游戏
2020/03/04 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
联谊会主持词
2014/03/26 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
报名委托书
2015/01/29 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers