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 25 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
JS中的模糊查询功能
Dec 08 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
npm全局环境变量配置详解
Dec 15 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数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python 数据加密代码
2008/12/24 Python
Python操作MySQL简单实现方法
2015/01/26 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
logging level级别介绍
2020/02/21 Python
Python如何用filter函数筛选数据
2020/03/05 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
一套C#面试题
2013/10/09 面试题
致接力运动员广播稿
2014/02/17 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android