在每个文本输入字段里面的jQuery清除按钮

Question

我想使用jQuery在网站上的每个输入字段的右侧动态添加一个清除按钮（一个X）。看过一些例子之后，所有这些都要求我改变实际的输入字段，这在整个站点中显然是无法做到的。

是否有一个简单的jQuery脚本我可以使用？一个为每个输入字段“text”添加一个清除按钮的脚本。无论什么阶级。

谢谢！

Answer 1

一个极端的草稿。

$('input[type=text]').each(function(){ 
    var $this = $(this); 

    $('<div class="clrInput"/>').css({ 
     position:'absolute', 
     left: $this.offset().left + $this.width() + 10, //10 for extra spacing from edge 
     top: $this.offset().top, 
     width: $this.height(), 
     height: $this.height() 
    }).text(' X ').data('inputEQ', $this.index()).appendTo('body'); 
}); 
$(document).on('click', '.clrInput', function(){ 
    $('input[type=text]').eq($(this).data('inputEQ')).val(''); 
}); 

And your jsFiddle

注

为了保持性能，更换document与最接近的静态父元素。

Answer 2

您可以使用下面的选择器。

var $inputs = $('input[type=text]') 

选择文本类型的所有输入，然后执行逻辑。

如果是要执行这对于每个输入不同的一些内部逻辑，使用$.each遍历输入和执行逻辑

$inputs.each(function() { 

    // Perform your logic 
});