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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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 和 MySQL 基础教程(三)
2006/10/09 PHP
一个简洁的多级别论坛
2006/10/09 PHP
需要发散思维学习PHP
2009/06/29 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
基于python中theano库的线性回归
2018/08/31 Python
python版本单链表实现代码
2018/09/28 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
详解Python:面向对象编程
2019/04/10 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python 如何在测试中使用 Mock
2021/03/01 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
英国网上超市:Ocado
2020/03/05 全球购物
司机辞职报告范文
2014/01/20 职场文书
学生党员公开承诺书
2014/05/28 职场文书
高中军训的心得体会
2014/09/01 职场文书
晚会闭幕词
2015/01/28 职场文书
公司人事任命通知
2015/04/20 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python