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 上万关键字瞬间匹配实现代码
Jul 07 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
JS常用表单验证方法总结
May 22 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 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
献给php初学者(入门学习经验谈)
2010/10/12 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
Python ljust rjust center输出
2008/09/06 Python
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python tkinter实现连连看游戏
2020/11/16 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
大学生大二自我鉴定
2013/10/28 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
四查四看剖析材料
2014/02/14 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
小学班级特色活动方案
2014/08/31 职场文书
一份文言文检讨书
2014/09/13 职场文书
大学生求职自荐信
2015/03/24 职场文书
民政局未婚证明
2015/06/15 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
Vue router配置与使用分析讲解
2022/12/24 Vue.js