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 替换Html标签实现代码
Oct 14 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
Ajax PHP分页演示
2007/01/02 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
vue实现信息管理系统
2020/05/30 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python itertools模块详解
2015/05/09 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
Python socket模块方法实现详解
2019/11/05 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
快餐公司创业计划书
2014/04/29 职场文书
双拥工作宣传标语
2014/06/26 职场文书
建筑施工安全责任书
2014/07/24 职场文书
小石潭记导游词
2015/02/03 职场文书
科技活动总结范文
2015/05/11 职场文书
南极大冒险观后感
2015/06/05 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android