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 相关文章推荐
jquery实现从数组移除指定的值
Jun 24 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
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 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
python GUI计算器的实现
2020/10/09 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
优秀求职信范文分享
2014/01/26 职场文书
新闻稿怎么写
2015/07/18 职场文书
诚信教育主题班会
2015/08/13 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
一条 SQL 语句执行过程
2022/03/17 MySQL
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
Python 绘制多因子柱状图
2022/05/11 Python