easyui textbox添加清除内容图标
目的：给easyui的textbox对象添加icon-clear图标，默认图标隐藏（如果有值则默认显示），当textbox输入内容后显示图标，删除内容后隐藏清除内容图标。
其实easyui的textbox提供了icons配置，可以配置textbox的图标，但是图标都是显示的，没有依据内容进行显示。
cons array The icons attached to the textbox. Each item has the following properties:
iconCls: string, the icon class.
disabled: boolean, indicate if the icon is disabled.
handler: function, the function to process the clicking action on this icon.
Code example:$('#tb').textbox({ icons: [{ iconCls:'icon-add', handler: function(e){ $(e.data.target).textbox('setValue', 'Something added!'); } },{ iconCls:'icon-remove', handler: function(e){ $(e.data.target).textbox('clear'); } }] })
easyui textbox添加清除内容图标扩展方法源代码和效果如下
<div id="dvX">姓名：<input type="text" /><br /><br />邮箱：<input type="text" /><br /><br />电话：<input type="text" /></div>
<script>
$(function () {
$('#dvX input').textbox().textbox('addClearBtn', 'icon-clear');
});
$.extend($.fn.textbox.methods, {
addClearBtn: function (jq, iconCls) {
var opts = jq.textbox('options');
opts.icons = opts.icons || [];
opts.icons.unshift({
iconCls: iconCls,
handler: function (e) {
$(e.data.target).textbox('clear').textbox('textbox').focus();
$(this).css('visibility', 'hidden');
}
});
return jq.each(function () {
var t = $(this);
t.textbox();
if (!t.textbox('getText')) {
t.textbox('getIcon', 0).css('visibility', 'hidden');
}
t.textbox('textbox').bind('keyup', function () {
var icon = t.textbox('getIcon', 0);
if ($(this).val()) {
icon.css('visibility', 'visible');
} else {
icon.css('visibility', 'hidden');
}
});
});
}
});
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui textbox添加清除内容图标