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 编程引入命名空间的方法与代码
Aug 13 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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
建立动态的WML站点(三)
2006/10/09 PHP
基于mysql的bbs设计(一)
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python 测试实现方法
2008/12/24 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python修改字典键(key)的方法
2019/08/05 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
房地产财务管理制度
2014/02/02 职场文书
政风行风整改方案
2014/10/25 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技