Question

这几乎可行。但是，当离开字段时出现“defaulttext”而不是原始文本值。不确定如何最有效地回显defaultText中的变量。

$(function() {
    var defaultText = $(this).val();
    $('input[type=text]').focus(function() {
      $(this).val('');
      });
     $('input[type=text]').blur(function() {
      $(this).val('defaultText');
      echo 
      });
 });

Answer 1

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

    input.focus(function() {
         $(this).val('');
    }).blur(function() {
         var el = $(this);

         /* use the elements title attribute to store the 
            default text - or the new HTML5 standard of using
            the 'data-' prefix i.e.: data-default="some default" */
         if(el.val() == '')
             el.val(el.attr('title'));
    });
 });

<强>更新

浏览器正在逐步实现placeholder属性，该属性提供向用户显示“提示”的功能。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

Answer 2

您需要删除set方法（val）中defaultText变量周围的''标记。

尝试

的某些行

$(function() {
    var defaultText = '';
    $('input[type=text]').focus(function() {
        defaultText = $(this).val();
        $(this).val('');
    });
    $('input[type=text]').blur(function() {
        $(this).val(defaultText); // NB removed the ' ' marks
        //echo // What are you trying to echo? 
     });
 });

Answer 3

此解决方案需要jQuery！

我将这个功能包装在这样的utils模块中：

var utils = (function () {
    var utils = {};
    //some other properties...
    utils.setupAutoclearInputs = function() {
        $('.input-autoclear').each(function() {
            $(this).data('default', $(this).val()).addClass('gray');
        }).focus(function(e) {
            if (!($(this).val() !== $(this).data('default'))) {
                $(this).removeClass('gray').addClass('black').data('modified', true).val('');
            }
        }).blur(function(e) {
            if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') {
                $(this).removeClass('black').addClass('gray').val($(this).data('default'));
            }
        });
    }
    //some other methods...
    return utils;
}());

在HTML中：

将<{1}}添加到您希望包含的每个输入中。

设置默认值：class="input-autoclear"

为灰色和黑色文本或任何你想要的东西创建一些css类。

就我个人而言，我正在使用<input ... value="defaultValue" ... >和.gray { ... }，但您可能想要更好的名字。

最后：

使用以下方法触发utils模块方法：

.black { ... }

确保模块的代码位于document.ready调用之外，您可能希望它位于应用程序的全局范围内。

有关正确的javascript模块编写的更多信息，请访问此article。

Answer 4

这个将使用.data（）函数为您保存默认文本。所以不需要额外的标记。

$('input').focus(function() {
    if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val());
    if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val("");
}).blur(function(){
    if ($(this).val() == "") $(this).val($(this).data("DefaultText"));
});

Answer 5

简单写$(this).val(defaultText):没有's，否则它不会将其视为变量。

Answer 6

在每个输入标记上使用HTML5属性占位符，例如：

<input type="text" value="original text value" placeholder="default value" />

Answer 7

我稍微改变了这段代码。

$(document).ready(function () {
    var defaultText = '';
    $('.input-focus-clear').focus(function () {
        defaultText = $(this).val();
        $(this).val('');
    });
    $('.input-focus-clear').blur(function () {
        var newText = $(this).val();
        if (newText.length < 1) {
           $(this).val(defaultText);
        }
    });
});

Answer 8

您没有引用变量defaultText。你传递一个字符串，因为它用引号括起来。

$(function() {
    var defaultText = $('input[type=text]').val();
    $('input[type=text]').focus(function() {
      $(this).val('');
      });
     $('input[type=text]').blur(function() {
      $(this).val(defaultText); // fixed!
      });
 });

Answer 9

在你的萤火虫中试试这个：

$(function() { console.log($(this)) });

你会发现

var defaultText = $(this).val();

可能不是你想要的。

如果输入的初始值是默认文本，请按以下方式获取：

var defaultText = $('input[type=text]').val()

请注意，只有在页面上只有一个输入文字时，这才能正常工作。

并删除引号：

$(this).val('defaultText');

Answer 10

var q = $('#q');
q.focus(function() {
    if ($(this).attr('data-default') == $(this).val()) {
        $(this).val('');
    }
}).blur(function() {
    if($(this).val() == '') {
        $(this).val($(this).attr('data-default'));
    }
});


<input type="text" name="q" id="q" data-default="Search..." value="Search..."/>

Answer 11

   $('.myclass').each(function() {
    var default_value = this.value;
    $(this).css('color', '#666'); // this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', '#333');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#666');
            this.value = default_value;
        }
    });
});
<input type="text" class="myclass" size="30" value="type here" />

Answer 12

这很有效！我自己用它：

/* Forminputs löschen und wiederherstellen */
jQuery(function() {
    var input = jQuery('#userForm input[type=text], #userForm textarea');

    input.focus(function() {

        jQuery(this).attr('data-default', jQuery(this).val());
        jQuery(this).val('');

    }).blur(function() {
        var el = jQuery(this);

        if (el.val() == '')
            el.val(el.attr('data-default'));
    });
});

使用jQuery清除焦点输入并返回模糊

12 个答案: