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 相关文章推荐
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
PHP单链表的实现代码
2016/07/05 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python网络编程实例简析
2014/09/26 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Pycharm小白级简单使用教程
2020/01/08 Python
美国钻石商店:Zales
2016/11/20 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
建筑学推荐信
2013/11/03 职场文书
高中毕业生自我鉴定
2013/11/03 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
收银员岗位职责
2014/02/07 职场文书
篮球社团活动总结
2014/06/27 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
勤俭节约主题班会
2015/08/13 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android