input输入内容后使用×号一键删除
如何实现input输入框输入内容后，再输入框最右边出现一个×号，点击叉号删除当前input输入框的内容，效果如下
input输入内容后使用×号一键删除源代码如下，已经做成jQuery插件形式
<!doctype html>
<style>
div.clearText{display:inline-block;position:relative}
div.clearText input{border:solid 1px #666;height:20px;line-height:20px;width:200px}
div.clearText a.x{position:absolute;line-height:20px;right:5px;top:0;display:none}
</style>
<!--IE6,IE7 css hack，使用IE独有的条件注释-->
<!--[if lte IE 7]><style>div.demo{display:inline}</style><![endif]-->
<div class="clearText"><input type="text" /></div><br /><br />
<div class="clearText"><input type="text" /></div><br /><br />
<div class="clearText"><input type="text" /></div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
(function () {
$.fn.clearText = function () {
return this.each(function () {
var el = $(this), text, a = $('<a href="#" class="x">×</a>');
el.append(a);
text = el.find(':text');
function inputEvent() { a[this.value == ''?'hide':'show'](); }
text.bind({ input: inputEvent, propertychange: inputEvent, paste: inputEvent });
a.click(function () { text.val('').focus(); a.hide(); return false });
if (text.val() != '') a.show();
});
}
})(jQuery);
$('div.clearText').clearText();
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：input输入内容后使用×号一键删除