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调用asp.net 页面后台的实现代码
Apr 27 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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 引用(&)详解
2009/11/20 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python调用java的Webservice示例
2014/03/10 Python
深入讲解Python编程中的字符串
2015/10/14 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Python编写登陆接口的方法
2017/07/10 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
利用Python检测URL状态
2019/07/31 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
技术人员面试提纲
2013/11/28 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
公务员政审材料
2014/12/23 职场文书
学校食品安全责任书
2015/01/29 职场文书