本文介绍了在使用jQuery easyUI时遇到的textbox限制输入特殊字符的问题，通过查看源码并进行扩展，允许了包括逗号、双引号、冒号、花括号和方括号等在内的特殊字符输入。
easyUI在实际使用中遇到这样的问题，textbox不能输入特殊字符，如：, “” : {} []等…所有需要拓展
查看源码:
(function($) {
var _4e0 = 0;
function init(_4e1) {
$(_4e1).addClass("textbox-f").hide();
var span = $("<span class=\"textbox\">"
+ "<input class=\"textbox-text\" autocomplete=\"off\">"
+ "<input type=\"hidden\" class=\"textbox-value\">" + "</span>")
.insertAfter(_4e1);
var name = $(_4e1).attr("name");
if (name) {
span.find("input.textbox-value").attr("name", name);
$(_4e1).removeAttr("name").attr("textboxName", name);
}
return span;
};
function _4e2(_4e3) {
var _4e4 = $.data(_4e3, "textbox");
var opts = _4e4.options;
var tb = _4e4.textbox;
var _4e5 = "_easyui_textbox_input" + (++_4e0);
tb.find(".textbox-text").remove();
if (opts.multiline) {
$("<textarea id=\""
+ _4e5
+ "\" class=\"textbox-text\" autocomplete=\"off\"></textarea>")
.prependTo(tb);
} else {
$("<input id=\"" + _4e5 + "\" type=\"" + opts.type
+ "\" class=\"textbox-text\" autocomplete=\"off\">")
.prependTo(tb);
}
$("#" + _4e5).attr("tabindex", $(_4e3).attr("tabindex") || "").css(
"text-align", $(_4e3).css("text-align"));
tb.find(".textbox-addon").remove();
var bb = opts.icons ? $.extend(true, [], opts.icons) : [];
if (opts.iconCls) {
bb.push({
iconCls : opts.iconCls,
disabled : true
});
}
if (bb.length) {
var bc = $("<span class=\"textbox-addon\"></span>").prependTo(tb);
bc.addClass("textbox-addon-" + opts.iconAlign);
for (var i = 0; i < bb.length; i++) {
bc
.append("<a href=\"javascript:void(0)\" class=\"textbox-icon "
+ bb[i].iconCls
+ "\" icon-index=\""
+ i
+ "\" tabindex=\"-1\"></a>");
}
}
tb.find(".textbox-button").remove();
if (opts.buttonText || opts.buttonIcon) {
var btn = $("<a href=\"javascript:void(0)\" class=\"textbox-button\"></a>")
.prependTo(tb);
btn.addClass("textbox-button-" + opts.buttonAlign).linkbutton({
text : opts.buttonText,
iconCls : opts.buttonIcon,
onClick : function() {
var t = $(this).parent().prev();
t.textbox("options").onClickButton.call(t[0]);
}
});
}
if (opts.label) {
if (typeof opts.label == "object") {
_4e4.label = $(opts.label);
_4e4.label.attr("for", _4e5);
} else {
$(_4e4.label).remove();
_4e4.label = $("<label class=\"textbox-label\"></label>")
.html(opts.label);
_4e4.label.css("textAlign", opts.labelAlign).attr("for", _4e5);
if (opts.labelPosition == "after") {
_4e4.label.insertAfter(tb);
} else {
_4e4.label.insertBefore(_4e3);
}
_4e4.label
.removeClass("textbox-label-left textbox-label-right textbox-label-top");
_4e4.label.addClass("textbox-label-" + opts.labelPosition);
}
} else {
$(_4e4.label).remove();
}
_4e6(_4e3);
_4e7(_4e3, opts.disabled);
_4e8(_4e3, opts.readonly);
};
function _4e9(_4ea) {
var tb = $.data(_4ea, "textbox").textbox;
tb.find(".textbox-text").validatebox("destroy");
tb.remove();
$(_4ea).remove();
};
function _4eb(_4ec, _4ed) {
var _4ee = $.data(_4ec, "textbox");
var opts = _4ee.options;
var tb = _4ee.textbox;
var _4ef = tb.parent();
if (_4ed) {
if (typeof _4ed == "object") {
$.extend(opts, _4ed);
} else {
opts.width = _4ed;
}
}
if (isNaN(parseInt(opts.width))) {
var c = $(_4ec).clone();
c.css("visibility", "hidden");
c.insertAfter(_4ec);
opts.width = c.outerWidth();
c.remove();
}
var _4f0 = tb.is(":visible");
if (!_4f0) {
tb.appendTo("body");
}
var _4f1 = tb.find(".textbox-text");
var btn = tb.find(".textbox-button");
var _4f2 = tb.find(".textbox-addon");
var _4f3 = _4f2.find(".textbox-icon");
if (opts.height == "auto") {
_4f1.css({
margin : "",
paddingTop : "",
paddingBottom : "",
height : "",
lineHeight : ""
});
}
tb._size(opts, _4ef);
if (opts.label && opts.labelPosition) {
if (opts.labelPosition == "top") {
_4ee.label._size({
width : opts.labelWidth == "auto"
? tb.outerWidth()
: opts.labelWidth
}, tb);
if (opts.height != "auto") {
tb._size("height", tb.outerHeight()
- _4ee.label.outerHeight());
}
} else {
_4ee.label._size({
width : opts.labelWidth,
height : tb.outerHeight()
}, tb);
if (!opts.multiline) {
_4ee.label.css("lineHeight", _4ee.label.height() + "px");
}
tb._size("width", tb.outerWidth() - _4ee.label.outerWidth());
}
}
if (opts.buttonAlign == "left" || opts.buttonAlign == "right") {
btn.linkbutton("resize", {
height : tb.height()
});
} else {
btn.linkbutton("resize", {
width : "100%"
});
}
var _4f4 = tb.width() - _4f3.length * opts.iconWidth - _4f5("left")
- _4f5("right");
var _4f6 = opts.height == "auto" ? _4f1.outerHeight() : (tb.height()
- _4f5("top") - _4f5("bottom"));
_4f2.css(opts.iconAlign, _4f5(opts.iconAlign) + "px");
_4f2.css("top", _4f5("top") + "px");
_4f3.css({
width : opts.iconWidth + "px",
height : _4f6 + "px"
});
_4f1.css({
paddingLeft : (_4ec.style.paddingLeft || ""),
paddingRight : (_4ec.style.paddingRight || ""),
marginLeft : _4f7("left"),
marginRight : _4f7("right"),
marginTop : _4f5("top"),
marginBottom : _4f5("bottom")
});
if (opts.multiline) {
_4f1.css({
paddingTop : (_4ec.style.paddingTop || ""),
paddingBottom : (_4ec.style.paddingBottom || "")
});
_4f1._outerHeight(_4f6);
} else {
_4f1.css({
paddingTop : 0,
paddingBottom : 0,
height : _4f6 + "px",
lineHeight : _4f6 + "px"
});
}
_4f1._outerWidth(_4f4);
if (!_4f0) {
tb.insertAfter(_4ec);
}
opts.onResize.call(_4ec, opts.width, opts.height);
function _4f7(_4f8) {
return (opts.iconAlign == _4f8 ? _4f2._outerWidth() : 0)
+ _4f5(_4f8);
};
function _4f5(_4f9) {
var w = 0;
btn.filter(".textbox-button-" + _4f9).each(function() {
if (_4f9 == "left" || _4f9 == "right") {
w += $(this).outerWidth();
} else {
w += $(this).outerHeight();
}
});
return w;
};
};
function _4e6(_4fa) {
var opts = $(_4fa).textbox("options");
var _4fb = $(_4fa).textbox("textbox");
_4fb.validatebox($.extend({}, opts, {
deltaX : function(_4fc) {
return $(_4fa).textbox("getTipX", _4fc);
},
onBeforeValidate : function() {
opts.onBeforeValidate.call(_4fa);
var box = $(this);
if (!box.is(":focus")) {
if (box.val() !== opts.value) {
opts.oldInputValue = box.val();
box.val(opts.value);
}
}
},
onValidate : function(_4fd) {
var box = $(this);
if (opts.oldInputValue != undefined) {
box.val(opts.oldInputValue);
opts.oldInputValue = undefined;
}
var tb = box.parent();
if (_4fd) {
tb.removeClass("textbox-invalid");
} else {
tb.addClass("textbox-invalid");
}
opts.onValidate.call(_4fa, _4fd);
}
}));
};
function _4fe(_4ff) {
var _500 = $.data(_4ff, "textbox");
var opts = _500.options;
var tb = _500.textbox;
var _501 = tb.find(".textbox-text");
_501.attr("placeholder", opts.prompt);
_501.unbind(".textbox");
$(_500.label).unbind(".textbox");
if (!opts.disabled && !opts.readonly) {
if (_500.label) {
$(_500.label).bind("click.textbox", function(e) {
if (!opts.hasFocusMe) {
_501.focus();
$(_4ff).textbox("setSelectionRange", {
start : 0,
end : _501.val().length
});
}
});
}
_501.bind("blur.textbox", function(e) {
if (!tb.hasClass("textbox-focused")) {
return;
}
opts.value = $(this).val();
if (opts.value == "") {
$(this).val(opts.prompt).addClass("textbox-prompt");
} else {
$(this).removeClass("textbox-prompt");
}
tb.removeClass("textbox-focused");
}).bind("focus.textbox", function(e) {
opts.hasFocusMe = true;
if (tb.hasClass("textbox-focused")) {
return;
}
if ($(this).val() != opts.value) {
$(this).val(opts.value);
}
$(this).removeClass("textbox-prompt");
tb.addClass("textbox-focused");
});
for (var _502 in opts.inputEvents) {
_501.bind(_502 + ".textbox", {
target : _4ff
}, opts.inputEvents[_502]);
}
}
var _503 = tb.find(".textbox-addon");
_503.unbind().bind("click", {
target : _4ff
}, function(e) {
var icon = $(e.target)
.closest("a.textbox-icon:not(.textbox-icon-disabled)");
if (icon.length) {
var _504 = parseInt(icon.attr("icon-index"));
var conf = opts.icons[_504];
if (conf && conf.handler) {
conf.handler.call(icon[0], e);
}
opts.onClickIcon.call(_4ff, _504);
}
});
_503.find(".textbox-icon").each(function(_505) {
var conf = opts.icons[_505];
var icon = $(this);
if (!conf || conf.disabled || opts.disabled
|| opts.readonly) {
icon.addClass("textbox-icon-disabled");
} else {
icon.removeClass("textbox-icon-disabled");
}
});
var btn = tb.find(".textbox-button");
btn.linkbutton((opts.disabled || opts.readonly) ? "disable" : "enable");
tb.unbind(".textbox").bind("_resize.textbox", function(e, _506) {
if ($(this).hasClass("easyui-fluid") || _506) {
_4eb(_4ff);
}
return false;
});
};
function _4e7(_507, _508) {
var _509 = $.data(_507, "textbox");
var opts = _509.options;
var tb = _509.textbox;
var _50a = tb.find(".textbox-text");
var ss = $(_507).add(tb.find(".textbox-value"));
opts.disabled = _508;
if (opts.disabled) {
_50a.blur();
_50a.validatebox("disable");
tb.addClass("textbox-disabled");
ss.attr("disabled", "disabled");
$(_509.label).addClass("textbox-label-disabled");
} else {
_50a.validatebox("enable");
tb.removeClass("textbox-disabled");
ss.removeAttr("disabled");
$(_509.label).removeClass("textbox-label-disabled");
}
};
function _4e8(_50b, mode) {
var _50c = $.data(_50b, "textbox");
var opts = _50c.options;
var tb = _50c.textbox;
var _50d = tb.find(".textbox-text");
opts.readonly = mode == undefined ? true : mode;
if (opts.readonly) {
_50d.triggerHandler("blur.textbox");
}
_50d.validatebox("readonly", opts.readonly);
tb.removeClass("textbox-readonly").addClass(opts.readonly
? "textbox-readonly"
: "");
};
$.fn.textbox = function(_50e, _50f) {
if (typeof _50e == "string") {
var _510 = $.fn.textbox.methods[_50e];
if (_510) {
return _510(this, _50f);
} else {
return this.each(function() {
var _511 = $(this).textbox("textbox");
_511.validatebox(_50e, _50f);
});
}
}
_50e = _50e || {};
return this.each(function() {
var _512 = $.data(this, "textbox");
if (_512) {
$.extend(_512.options, _50e);
if (_50e.value != undefined) {
_512.options.originalValue = _50e.value;
}
} else {
_512 = $.data(this, "textbox", {
options : $.extend({},
$.fn.textbox.defaults, $.fn.textbox
.parseOptions(this), _50e),
textbox : init(this)
});
_512.options.originalValue = _512.options.value;
}
_4e2(this);
_4fe(this);
if (_512.options.doSize) {
_4eb(this);
}
var _513 = _512.options.value;
_512.options.value = "";
$(this).textbox("initValue", _513);
});
};
$.fn.textbox.methods = {
options : function(jq) {
return $.data(jq[0], "textbox").options;
},
cloneFrom : function(jq, from) {
return jq.each(function() {
var t = $(this);
if (t.data("textbox")) {
return;
}
if (!$(from).data("textbox")) {
$(from).textbox();
}
var opts = $.extend(true, {}, $(from)
.textbox("options"));
var name = t.attr("name") || "";
t.addClass("textbox-f").hide();
t.removeAttr("name").attr("textboxName", name);
var span = $(from).next().clone().insertAfter(t);
var _514 = "_easyui_textbox_input" + (++_4e0);
span.find(".textbox-value").attr("name", name);
span.find(".textbox-text").attr("id", _514);
var _515 = $($(from).textbox("label")).clone();
if (_515.length) {
_515.attr("for", _514);
if (opts.labelPosition == "after") {
_515.insertAfter(t.next());
} else {
_515.insertBefore(t);
}
}
$.data(this, "textbox", {
options : opts,
textbox : span,
label : (_515.length ? _515 : undefined)
});
var _516 = $(from).textbox("button");
if (_516.length) {
t.textbox("button").linkbutton($.extend(true, {},
_516.linkbutton("options")));
}
_4fe(this);
_4e6(this);
});
},
textbox : function(jq) {
return $.data(jq[0], "textbox").textbox.find(".textbox-text");
},
button : function(jq) {
return $.data(jq[0], "textbox").textbox.find(".textbox-button");
},
label : function(jq) {
return $.data(jq[0], "textbox").label;
},
destroy : function(jq) {
return jq.each(function() {
_4e9(this);
});
},
resize : function(jq, _517) {
return jq.each(function() {
_4eb(this, _517);
});
},
disable : function(jq) {
return jq.each(function() {
_4e7(this, true);
_4fe(this);
});
},
enable : function(jq) {
return jq.each(function() {
_4e7(this, false);
_4fe(this);
});
},
readonly : function(jq, mode) {
return jq.each(function() {
_4e8(this, mode);
_4fe(this);
});
},
isValid : function(jq) {
return jq.textbox("textbox").validatebox("isValid");
},
clear : function(jq) {
return jq.each(function() {
$(this).textbox("setValue", "");
});
},
setText : function(jq, _518) {
return jq.each(function() {
var opts = $(this).textbox("options");
var _519 = $(this).textbox("textbox");
_518 = _518 == undefined ? "" : String(_518);
if ($(this).textbox("getText") != _518) {
_519.val(_518);
}
opts.value = _518;
if (!_519.is(":focus")) {
if (_518) {
_519.removeClass("textbox-prompt");
} else {
_519.val(opts.prompt)
.addClass("textbox-prompt");
}
}
$(this).textbox("validate");
});
},
initValue : function(jq, _51a) {
return jq.each(function() {
var _51b = $.data(this, "textbox");
$(this).textbox("setText", _51a);
_51b.textbox.find(".textbox-value").val(_51a);
$(this).val(_51a);
});
},
setValue : function(jq, _51c) {
return jq.each(function() {
var opts = $.data(this, "textbox").options;
var _51d = $(this).textbox("getValue");
$(this).textbox("initValue", _51c);
if (_51d != _51c) {
opts.onChange.call(this, _51c, _51d);
$(this).closest("form").trigger("_change", [this]);
}
});
},
getText : function(jq) {
var _51e = jq.textbox("textbox");
if (_51e.is(":focus")) {
return _51e.val();
} else {
return jq.textbox("options").value;
}
},
getValue : function(jq) {
return jq.data("textbox").textbox.find(".textbox-value").val();
},
reset : function(jq) {
return jq.each(function() {
var opts = $(this).textbox("options");
$(this).textbox("setValue", opts.originalValue);
});
},
getIcon : function(jq, _51f) {
return jq.data("textbox").textbox.find(".textbox-icon:eq(" + _51f
+ ")");
},
getTipX : function(jq, _520) {
var _521 = jq.data("textbox");
var opts = _521.options;
var tb = _521.textbox;
var _522 = tb.find(".textbox-text");
var _523 = tb.find(".textbox-addon")._outerWidth();
var _524 = tb.find(".textbox-button")._outerWidth();
var _520 = _520 || opts.tipPosition;
if (_520 == "right") {
return (opts.iconAlign == "right" ? _523 : 0)
+ (opts.buttonAlign == "right" ? _524 : 0) + 1;
} else {
if (_520 == "left") {
return (opts.iconAlign == "left" ? -_523 : 0)
+ (opts.buttonAlign == "left" ? -_524 : 0) - 1;
} else {
return _523 / 2 * (opts.iconAlign == "right" ? 1 : -1)
+ _524 / 2 * (opts.buttonAlign == "right" ? 1 : -1);
}
}
},
getSelectionStart : function(jq) {
return jq.textbox("getSelectionRange").start;
},
getSelectionRange : function(jq) {
var _525 = jq.textbox("textbox")[0];
var _526 = 0;
var end = 0;
if (typeof _525.selectionStart == "number") {
_526 = _525.selectionStart;
end = _525.selectionEnd;
} else {
if (_525.createTextRange) {
var s = document.selection.createRange();
var _527 = _525.createTextRange();
_527.setEndPoint("EndToStart", s);
_526 = _527.text.length;
end = _526 + s.text.length;
}
}
return {
start : _526,
end : end
};
},
setSelectionRange : function(jq, _528) {
return jq.each(function() {
var _529 = $(this).textbox("textbox")[0];
var _52a = _528.start;
var end = _528.end;
if (_529.setSelectionRange) {
_529.setSelectionRange(_52a, end);
} else {
if (_529.createTextRange) {
var _52b = _529.createTextRange();
_52b.collapse();
_52b.moveEnd("character", end);
_52b.moveStart("character", _52a);
_52b.select();
}
}
});
}
};
$.fn.textbox.parseOptions = function(_52c) {
var t = $(_52c);
return $.extend({}, $.fn.validatebox.parseOptions(_52c), $.parser
.parseOptions(_52c, ["prompt", "iconCls", "iconAlign",
"buttonText", "buttonIcon",
"buttonAlign", "label",
"labelPosition", "labelAlign", {
multiline : "boolean",
iconWidth : "number",
labelWidth : "number"
}]), {
value : (t.val() || undefined),
type : (t.attr("type") ? t.attr("type") : undefined)
});
};
$.fn.textbox.defaults = $.extend({}, $.fn.validatebox.defaults, {
doSize : true,
width : "auto",
height : "auto",
prompt : "",
value : "",
type : "text",
multiline : false,
icons : [],
iconCls : null,
iconAlign : "right",
iconWidth : 18,
buttonText : "",
buttonIcon : null,
buttonAlign : "right",
label : null,
labelWidth : "auto",
labelPosition : "before",
labelAlign : "left",
inputEvents : {
blur : function(e) {
var t = $(e.data.target);
var opts = t.textbox("options");
if (t.textbox("getValue") != opts.value) {
t.textbox("setValue", opts.value);
}
},
keydown : function(e) {
if (e.keyCode == 13) {
var t = $(e.data.target);
t.textbox("setValue", t.textbox("getText"));
}
}
},
onChange : function(_52d, _52e) {
},
onResize : function(_52f, _530) {
},
onClickButton : function() {
},
onClickIcon : function(_531) {
}
});
})(jQuery);中的
$.fn.textbox.defaults = $.extend({}, $.fn.validatebox.defaults, {
doSize : true,
width : "auto",
height : "auto",
prompt : "",
value : "",
type : "text",
multiline : false,
icons : [],
iconCls : null,
iconAlign : "right",
iconWidth : 18,
buttonText : "",
buttonIcon : null,
buttonAlign : "right",
label : null,
labelWidth : "auto",
labelPosition : "before",
labelAlign : "left",
inputEvents : {
blur : function(e) {
var t = $(e.data.target);
var opts = t.textbox("options");
if (t.textbox("getValue") != opts.value) {
t.textbox("setValue", opts.value);
}
},
keydown : function(e) {
if (e.keyCode == 13) {
var t = $(e.data.target);
t.textbox("setValue", t.textbox("getText"));
}
}
},
onChange : function(_52d, _52e) {
},
onResize : function(_52f, _530) {
},
onClickButton : function() {
},
onClickIcon : function(_531) {
}
});然后自己扩展一下
$.extend($.fn.textbox.defaults, {
inputEvents : {
keyup : function(e, param) {
var opts = $(e.data.target).textbox("getText");
opts = opts.replace(/[{}\[\],:"]+/, "");
$(e.data.target).textbox("setValue", opts);
}
}
});
扫一扫
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
