现在的位置: 首页 > easyui > Form > combo > 正文
小 中 大
combo扩展:禁止手工改变输入框的值
2012年08月03日 ⁄ combo ⁄ 共 3122字 ⁄ 评论数 19 ⁄ 被围观 19,322 views+
文章目录
[隐藏]

对于combo组件，作者自身就提供了disable和enable方法来禁用组件，不过他这里的禁用是把整个组件禁用了，而有时候我们为了限制用户行为，并不需要禁用整个combo组件，只要不让用户自己改变combo组件输入框部分的值就可以了。话不多说了，直接上扩展代码：

实现代码：

  1. $.extend($.fn.combo.methods, {
  2.     /**
  3.      * 禁用combo文本域
  4.      * @param {Object} jq
  5.      * @param {Object} param stopArrowFocus:是否阻止点击下拉按钮时foucs文本域
  6.      * stoptype:禁用类型，包含disable和readOnly两种方式
  7.      */
  8.     disableTextbox : function(jq, param) {
  9.         return jq.each(function() {
  10.             param = param || {};
  11.             var textbox = $(this).combo("textbox");
  12.             var that = this;
  13.             var panel = $(this).combo("panel");
  14.             var data = $(this).data('combo');
  15.             if (param.stopArrowFocus) {
  16.                 data.stopArrowFocus = param.stopArrowFocus;
  17.                 var arrowbox = $.data(this, 'combo').combo.find('span.combo-arrow');
  18.                 arrowbox.unbind('click.combo').bind('click.combo', function() {
  19.                     if (panel.is(":visible")) {
  20.                         $(that).combo('hidePanel');
  21.                     } else {
  22.                         $("div.combo-panel").panel("close");
  23.                         $(that).combo('showPanel');
  24.                     }
  25.                 });
  26.                 textbox.unbind('mousedown.mycombo').bind('mousedown.mycombo', function(e) {
  27.                         e.preventDefault();
  28.                 });
  29.             }
  30.             textbox.prop(param.stoptype?param.stoptype:'disabled', true);
  31.             data.stoptype = param.stoptype?param.stoptype:'disabled';
  32.         });
  33.     },
  34.     /**
  35.      * 还原文本域
  36.      * @param {Object} jq
  37.      */
  38.     enableTextbox : function(jq) {
  39.         return jq.each(function() {
  40.             var textbox = $(this).combo("textbox");
  41.             var data = $(this).data('combo');
  42.             if (data.stopArrowFocus) {
  43.                 var that = this;
  44.                 var panel = $(this).combo("panel");
  45.                 var arrowbox = $.data(this, 'combo').combo.find('span.combo-arrow');
  46.                 arrowbox.unbind('click.combo').bind('click.combo', function() {
  47.                     if (panel.is(":visible")) {
  48.                         $(that).combo('hidePanel');
  49.                     } else {
  50.                         $("div.combo-panel").panel("close");
  51.                         $(that).combo('showPanel');
  52.                     }
  53.                     textbox.focus();
  54.                 });
  55.                 textbox.unbind('mousedown.mycombo');
  56.                 data.stopArrowFocus = null;
  57.             }
  58.             textbox.prop(data.stoptype, false);
  59.             data.stoptype = null;
  60.         });
  61.     }
  62. });

使用方式：

在引入easyui的核心库后，引入本扩展的实现代码，这个地方，拿datebox和combobox做例子，因为datebox依赖combo，也继承combo的方法，所以datebox可以直接使用本文扩展的方法：

  1. //datebox
  2. $('#dd').datebox('disableTextbox',{stoptype:'readonly',stopArrowFocus:true});
  3. //combobox
  4. $('#cc,#cc2').combobox('disableTextbox',{stoptype:'readOnly',stopArrowFocus:true});

效果演示：

datebox:http://www.easyui.info/easyui/demo/datebox/061.html
combobox:http://www.easyui.info/easyui/demo/combobox/061.html

更新日志：

2012-12-26:

增加参数用于设置如何禁用输入框，分为readonly和disabled两种方式
disableTextbox函数入参介绍：

Name Type Description Default
stoptype string 禁用text的方式，可以为'disabled'或者'readonly'. disabled
stopArrowFocus boolean 为true的话，下拉面板显示的时候，将不会把焦点放到输入框上. false
返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 扩展的validatebox校验规则跑哪里去了
  2. combo组件点击控件之外区域时不能触发onHidePanel问题
  3. combo扩展:让combo点击文本框也能显示下拉面板
  4. jQuery Easyui 源码分析之combo组件
JS中的逗号操作符
表格组件列属性formatter和styler使用方法
My97DatePicker与easyui共用问题
理解原型

目前有 19 条留言 其中：访客:10 条, 博主:7 条 引用: 2

  1. 活力橙 : 2012年08月03日15:05:18  -49楼 @回复 回复

    这个方法非常好！希望easyui也能加入相关功能！目前来说 :mrgreen: 就是大神的这个方法最实用了！


  2. 管理员     世纪之光 : 2012年08月03日15:12:48  -48楼 @回复 回复

    @活力橙
    过奖了，这属于非常简单的扩展了，复杂的扩展动辄几百行代码的。

  3. 马路小生 : 2012年08月04日13:46:24  -47楼 @回复 回复

    看demo貌似有点意思哈。


  4. 管理员     世纪之光 : 2012年08月04日13:58:26  -46楼 @回复 回复

    @马路小生
    我勒个去，你怎么跑到这个博客上留言了……

  5. spark : 2012年09月07日22:58:58  -45楼 @回复 回复

    直接设置其 editable 为 false 就好了呀


    • 管理员       世纪之光 : 2012年09月08日16:09:16  地下1层 @回复 回复

      倒是没注意这个属性，不过属性的话用起来还是没有方法用的灵活，因为仅仅重新设置属性而不重新构造组件的话 设置的属性是不会生效的。

      • spark : 2012年09月11日11:38:05  地下2层 @回复 回复

        蒽 明白你的意思，就是说不一定是在初始化的时候来这样设置对吧


        • 管理员           世纪之光 : 2012年09月11日11:48:38  地下3层 @回复 回复

          对的，有方法的话才能真正是实现动态控制它的可编辑性，随时随地可以灵活设置。

  6. liny : 2012年10月19日10:41:20  -44楼 @回复 回复

    嗯，很实用,有个问题请教下,datebox如何实现只能选择月份,不需要日

  7. Qzhou : 2013年08月25日19:02:11  -43楼 @回复 回复

    请问如何设置让网站里所有的databox和combobox禁止手工输入


    • 管理员       世纪之光 : 2013年08月25日22:45:26  地下1层 @回复 回复

      这个可以通过改源码的方式，主要还是改combo的源码，组件构造完，在源码内部调用我扩展的方法。

  8. yulei : 2015年04月09日19:16:58  -42楼 @回复 回复

    请问能不能在构造函数或者dom的扩展属性上面设置这两个值 ，以避免在初始化后再进行函数调用来设置？
    比如： 460

  9. 水中鳥 : 2015年08月12日21:59:38  -41楼 @回复 回复

    請問一下如果是datagrid的話要怎麼使用
    ex
    { field: ‘Odate’, title: ‘日期’, width: ‘100px’, halign: ‘center’, editor: { type: ‘datebox’} },
    謝謝


    • 管理员       世纪之光 : 2015年08月13日10:23:42  地下1层 @回复 回复

      开始编辑之后获取到编辑器的target，然后根据target获取到datebox实例，最后调用combo实例本文扩展的方法。
      代码示例：

      1
2
3

      $("#tt").datagrid('beginEdit', rowIndex);
var editor = $('#tt').datagrid('getEditor',{index:rowIndex,field:"startTime"});
$(editor.target).datebox('disableTextbox')
  10. 小白 : 2015年10月30日16:54:42  -40楼 @回复 回复

    谢谢楼主！

  11. 萧萧 : 2015年11月11日09:53:05  -39楼 @回复 回复

    虽然禁用录入了，但上下箭头的选择的功能也没有了， 想问下手工录入的值怎么才能setValue 到 combobox 中呢

查看来自外部的引用: 2

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×