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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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下载生成的csv文件及问题总结
2015/08/06 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
图片完美缩放
2006/09/07 Javascript
jQuery使用手册之一
2007/03/24 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
js实现小时钟效果
2020/03/25 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python机器学习之决策树算法
2017/12/22 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python解析xml简单示例
2019/06/21 Python
python的pstuil模块使用方法总结
2019/07/26 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Django之PopUp的具体实现方法
2019/08/31 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
班组长工作职责
2013/12/25 职场文书
高中军训第一天感言
2014/03/06 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS