对具有相同类的元素应用Jquery .one函数

Question

我有以下简单的Jquery：

<script type="text/javascript"> 
$(document).ready(function(){
     $(document).one('focus', 'input', function() {
          $(this).val('');
     });
});
</script>

<input type="text" value="Default 1" />
<input type="text" value="Default 2" />
<input type="text" value="Default 3" />
<input type="text" value="Default 4" />
<input type="text" value="Default 5" />

上述代码将导致仅对所有元素运行一次焦点功能。

如何让每个输入元素运行一次函数？例如：

单击第二个元素，运行一次。单击第一个元素，运行一次。等等...

Answer 1

您可以使用not选择器：

$(document).on('focus', 'input:not(.focused)', function() {
     $(this).addClass('focused').val('');
});

Answer 2

接受的答案有效，但我猜你真正要做的是使用placeholder：

<input type="text" placeholder="Default 1" />
<input type="text" placeholder="Default 2" />

在browsers that support placeholder中，您将获得一些启动文本，这些文本在焦点上清除，而不会影响使用javascript的性能。在不受支持的浏览器中，您可以使用polyfill来完成您尝试执行的操作。

此外，.each()函数可用于对选择器返回的每个元素执行某些操作。

这是一个简单的占位符polyfill：

$(function(){
    placeholderPolyfill();
});

function placeholderPolyfill() {
    if (!placeholderIsSupported()) {
        $("input[placeholder]").each(function() {
            this.value = this.placeholder;
            $(this).one('focus', function() {
                this.value = '';
            });
        });
    }
}

function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

Here's a demo in fiddle