现在的位置: 首页 > easyui > Form > combo > 正文
小 中 大
combo扩展:禁止手工改变输入框的值
2012年08月03日 ⁄ combo ⁄ 共 3122字 ⁄ 评论数 19 ⁄ 被围观 21,808 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中的逗号操作符
一个问题的思考
Javascript严格模式
tabs扩展:按照标签页ID进行检索

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

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

  2. 管理员     世纪之光 : 2012年08月03日15:12:48  -48楼 @回复 回复
  3. 马路小生 : 2012年08月04日13:46:24  -47楼 @回复 回复

  4. 管理员     世纪之光 : 2012年08月04日13:58:26  -46楼 @回复 回复
  5. spark : 2012年09月07日22:58:58  -45楼 @回复 回复
  6. liny : 2012年10月19日10:41:20  -44楼 @回复 回复
  7. Qzhou : 2013年08月25日19:02:11  -43楼 @回复 回复
  8. yulei : 2015年04月09日19:16:58  -42楼 @回复 回复
  9. 水中鳥 : 2015年08月12日21:59:38  -41楼 @回复 回复
  10. 小白 : 2015年10月30日16:54:42  -40楼 @回复 回复
  11. 萧萧 : 2015年11月11日09:53:05  -39楼 @回复 回复

查看来自外部的引用: 2

给我留言

留言无头像?


插入图片

返回首页

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