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中创建实例与原型继承揭秘
Dec 21 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
Javascript实现鼠标移入方向感知
Jun 24 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php备份数据库类分享
2015/04/14 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python+opencv识别图片中的圆形
2020/03/25 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python通过链接抓取网站详解
2019/11/20 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python代码实现图书管理系统
2020/11/30 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
应届大学生自荐信
2013/12/05 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android