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 的 prototype问题。
Jan 03 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
短信提示使用 特效
2007/01/19 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python字符串的常用操作方法小结
2016/05/21 Python
Python+django实现简单的文件上传
2016/08/17 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
环境监测与治理技术专业求职信
2014/07/06 职场文书
师德标兵事迹材料
2014/12/19 职场文书
宾馆安全管理制度
2015/08/06 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
PyTorch中的torch.cat简单介绍
2022/03/17 Python