Question

我一直在使用此代码切换输入onFocus和Blur的值：

$('input, textarea').focus(function() {
            value=$(this).val();
            $(this).attr("value","")};
        });
        $('input, textarea').blur(function() {
            if($(this).val()=="") {
                $(this).val(value);
            }
        });

唯一的问题是，当我在这些输入中键入内容时，然后在键入另一个输入后重新聚焦，该字段变为空白。有没有办法编辑这段代码来禁止这个？

Example for you here：）

我试过这样的事情，但它没有我想要的效果：

$('input, textarea').focus(function() {
            value=$(this).val();
    if($(this).val(value)) {
            $(this).attr("value","");
        });
        $('input, textarea').blur(function() {
            if($(this).val()=="") {
                $(this).val(value);
            }
        });

Answer 1

您需要设置初始值并检查..

$('input, textarea').each(function(){
    // initial storing of the pre-defined value
    $(this).data('initial', this.value);
}).focus(function(){
    var $this = $(this);
    // on focus if the value of the field is still the initial then clear it
    if ( (this.value) == $this.data('initial') )
      this.value = '';
}).blur(function(){
    var $this = $(this);
    // on blur if the value is still cleared then restore the initial 
    if ( (this.value) == '' )
        this.value = $this.data('initial');
})

演示：http://jsfiddle.net/EMYmG/2/

<强>更新

您可以避免存储到数据，因为我们可以使用名为defaultValue的标准属性。（变得更清洁）

$('input, textarea').focus(function(){
        // on focus if the value of the field is still the initial then clear it
        if ( (this.value) == this.defaultValue )
          this.value = '';
    }).blur(function(){
        // on blur if the value is still cleared then restore the initial 
        if ( (this.value) == '' )
            this.value = this.defaultValue;
    })

演示：http://jsfiddle.net/PjsRQ/

Answer 2

值不是标签。试图假装它们会导致严重的可访问性问题。

如果你真的想使用这种设计，我请你不要这样做。然后在输入下放置标签并对其进行样式设置，使其无法看到（但仍存在于屏幕阅读器的DOM中）。

A jQuery example is on my website，代码清晰，但等待正确记录。

Answer 3

尝试这样的事情：http://jsfiddle.net/Ajcmq/

这是一个非常简单的事情，真的：如果该字段的值是最初的四个值之一，那么清除它，否则，我们假设它已被更改，我们将它留在焦点上。

唯一的缺点是，当您在另一个字段中使用四个dfault值之一时，它也将被清空：D。

Answer 4

jQuery Form Example plugin执行此操作的方法是将一个类分配给输入元素，并在更改元素中的初始值以确定在DOM加载后哪些元素已编辑且仍包含哪些元素后将其删除初始值。

Answer 5

为什么不使用jQuery Hint Overlay？

http://jsfiddle.net/6y2wX/

jQuery输入值切换

5 个答案: