input输入内容后使用×号一键删除

  如何实现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输入内容后使用×号一键删除

评论(0)Web开发网
阅读(130)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧