jquery通过扩展select控件实现支持enter或focus选择的方法


Posted in Javascript onNovember 19, 2015

本文实例讲述了jquery通过扩展select控件实现支持enter或focus选择的方法。分享给大家供大家参考,具体如下:

/***************************************
* @ author jdkleo
* @ date 2013/2/27
 JQuery SelKeys
USAGE:
 jQuery.selkeys.enter(jQuery("#selcon"));
 jQuery.selkeys.focus(jQuery("#selcon2"));
*****************************************/
(function (jQuery){
 this.version = '(beta)(0.0.1)';
 this.all = {};
 /**---------enter---------**/
 this.enter = function(sel){ 
  var flag = 1;
  var open = function(){ 
   if(flag==1){
    sel.get(0).size = sel.get(0).options.length;
    flag=0;
   }else{
    sel.get(0).size = 1;
    flag=1;
   }
  }; 
  sel.keydown(function(e){ 
    e = e ? e :(window.event ? window.event : null); 
    var code = e.keyCode || e.which || e.charCode;
    if(code == 13)
    {
     open();
     return false;
    }
   });
  sel.blur(function(){
     sel.get(0).size=1;
     flag=1;
     });   
 } 
 /**---------focus---------**/
 this.focus = function(sel){ 
  var flag = 1;
  var open = function(){ 
   if(flag==1){
    sel.get(0).size = sel.get(0).options.length;
    flag=0;
   }else{
    sel.get(0).size = 1;
    flag=1;
   }
  }; 
  sel.focus(function(){ 
    open();
    return false;
   });
  sel.blur(function(){
    sel.get(0).size=1;
    flag=1;
   });
  sel.keydown(function(e){ 
    e = e ? e :(window.event ? window.event : null); 
    var code = e.keyCode || e.which || e.charCode;
    if(code == 13)
    {
     sel.get(0).size=1;
     flag=1;
     return false;
    }
   });
 }
 /**---------all---------**/
 jQuery.selkeys = this;
 return jQuery; 
})(jQuery);

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
javascript中checkbox使用方法实例演示
Nov 19 #Javascript
jquery实现表格隔行换色效果
Nov 19 #Javascript
javascript设计简单的秒表计时器
Sep 05 #Javascript
跟我学习javascript的定时器
Nov 19 #Javascript
分享纯手写漂亮的表单验证
Nov 19 #Javascript
javascript获取系统当前时间的方法
Nov 19 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 #Javascript
You might like
PHP goto语句用法实例
2019/08/06 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python中获取对象信息的方法
2015/04/27 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python中import机制详解
2017/11/14 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
Python超详细分步解析随机漫步
2022/03/17 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis