jquery通过扩展select控件实现支持enter或focus选择的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery select控件的相关操作实现代码

    获取select 先看看下面代码: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id").val

  • 轻松使用jQuery双向select控件Bootstrap Dual Listbox

    轻松使用jQuery双向select控件Bootstrap Dual Listbox

    本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一.使用 1.引用css和js文件 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> <

  • jquery下拉select控件操作方法分享(jquery操作select)

    JQuery获取和设置Select选项方法汇总如下: 代码: 复制代码 代码如下: $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Textvar checkValue=$("#select

  • jQuery实现两个select控件的互移操作

    jQuery实现两个select控件的互移操作

    一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> </head> <body> <div> <select id="leftSelector" multiple="multiple" name="SmsLis

  • 浅析jQuery操作select控件的取值和设值

    1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){ $(".select_B").empty();// 清空后一个select var option = $("<option>").val(1).text('xxx');// 按照实际业务要求重新赋值option $(".select_B").append(optio

  • jQuery选中select控件 无法设置selected的解决方法

    解决办法:把选中option的语句放到setTimeout中,例: 复制代码 代码如下: setTimeout(function() { var selSorts = $("select[id^='" + controls.selsort + "']"); $.each(selSorts, function(index, sort) { var ope = $(sort).find("option[value='" + arrSort[index

  • jquery通过扩展select控件实现支持enter或focus选择的方法

    本文实例讲述了jquery通过扩展select控件实现支持enter或focus选择的方法.分享给大家供大家参考,具体如下: /*************************************** * @ author jdkleo * @ date 2013/2/27 JQuery SelKeys USAGE: jQuery.selkeys.enter(jQuery("#selcon")); jQuery.selkeys.focus(jQuery("#selcon

  • jQuery文件上传控件 Uploadify 详解

    jQuery文件上传控件 Uploadify 详解

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&

  • jQuery密码强度验证控件使用详解

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

  • jQuery操作表单常用控件方法小结

    本文实例总结了jQuery操作表单常用控件方法.分享给大家供大家参考.具体如下: 下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 Radion <input type="radio" name="rd" id="rd1" checked="checked" value="rd1" /&

  • HTML的select控件美化

    HTML的select控件美化

    CSS: .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-select-text > div { p

  • jquery获取点击控件的绝对位置简单实例

    在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to the offset parent,可以看到是针对父结点的,而offset官方解释relative to the document,貌似使用offset可以直接绝对定位.但是在网页中如果出现嵌套div的情况,top和left会叠加,因此这个时候如果要定位显示一个新的div就要把父亲结点的offset去

  • jquery获取easyui日期控件的值实现方法

    jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery获取easyui日期控件的值 jquery easyui 日期框 有这样的一个日期文本框: <input type="text" name="mdate" size="20" value＝"" id="mdate" class="easyui-datebox"/> 使用easyui给文本框

  • jQuery的时间datetime控件在AngularJs中的使用实例(分享)

    百度一下,自己也想了一下,有一种简单,无脑的方式分享给你: <input ng-model="start" id="start" placeholder="开始日期" style="width:156px;" class="form-control date-picker" data-date-format="yyyy-mm-dd" type="text">

随机推荐