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 相关文章推荐
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
js制作简易年历完整实例
Jan 28 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
Highcharts学习之数据列
Aug 03 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
一些可能会用到的Node.js面试题
2019/06/15 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
实例讲解python中的协程
2018/10/08 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
作风建设演讲稿
2014/05/23 职场文书
2014年维稳工作总结
2014/11/18 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
运动员代表致辞
2015/07/29 职场文书
初二英语教学反思
2016/02/15 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
python xlwt模块的使用解析
2021/04/13 Python
MySQL数据库之存储过程 procedure
2022/06/16 MySQL