jQuery 占位符/提示使提示保持焦点的 JavaScript答案

【问题标题】：jQuery placeholder/hint JavaScript that keeps the hint on focusjQuery 占位符/提示使提示保持焦点的 JavaScript
【发布时间】：2011-10-25 20:21:34
【问题描述】：

有数百个 jQuery 占位符/提示插件。但是没有一个能做我想做的事

我正在寻找能够：

当用户关注该字段时淡化提示，但直到用户开始输入时才清除提示（如 StackOverflow/iOS 之一）
将使用 HTML5 占位符属性。
用 jQuery 构建
跨浏览器（包括 IE7/IE8）
使用不显眼的 JavaScript
理想情况下也可以使用密码字段

【问题讨论】：

这很棘手，因为 HTML5 规范规定 placeholder 值应该disappear on focus，所以当然任何 polyfill 都会尝试与该要求保持一致（不利于可用性），以便该行为与具有原生占位符支持的浏览器一致。
不是一个好的用户体验 - 如果你淡化它，它会使文本出现乱码。如果你进一步淡化它以减轻乱码，你还不如清除它。
另见：stackoverflow.com/questions/8574356/…

标签： javascript jquery html placeholder hint

【解决方案1】：

@Roatin Marth 是对的；如果您要将文本视为占位符，则应该清除它。这就是占位符的定义。

不过，我还是模拟了一个概念证明，欢迎您随意使用。但是，我不得不将占位符文本设置得非常轻，以至于几乎看不到它，以防止它过多地混淆前面的文本（这就是为什么默认行为是清除它的原因）。

您可以在以下位置看到它的工作原理：http://jsfiddle.net/zYQ4Q/4/

// Create placeholder input to serve as background
var $test = $('#test');
var $placeholder = $test.clone().removeAttr('id').removeAttr('placeholder').addClass('placeholder').val($test.attr('placeholder'));
var $container = $('<span class="placeholder-container"></span>');
$container.insertAfter($test).append($test).append($placeholder);

// Basic styling
$container.css({
   position: 'relative'
});
$test.css({
    position: 'absolute',
    left: 0,
    top: 0,
    zIndex: 10,
    backgroundColor: 'transparent',
    borderColor: 'transparent'
});
$placeholder.css('color', 'transparent');

// Behavior for focus and blur to achieve the visual effect
$test.focus(function(){
   var $input = $(this);
   var $placeholder = $('.placeholder', $input.parent());
   $placeholder.css('color', '#e0e0e0');
}).blur(function(){
   var $input = $(this);
   var $placeholder = $('.placeholder', $input.parent());
   if ($input.val() == '')
       $placeholder.css('color', 'transparent');
}).keyup(function(){
    var $input = $(this);
    if ($input.val().trim() != '') {
        $placeholder.val('');
    } else {
        $placeholder.val($input.attr('placeholder'));
    }
});

更新：代码和 jsfiddle 已更新，以反映基于 OP 评论的新更改。将文本输入输入后，占位符现在会清除。

【讨论】：

澄清一下，它应该被清除，但只是在用户开始输入时，而不是在他们专注于该字段时
这很有帮助，但是：它不适用于 IE7/IE8。它不适用于密码字段。它没有打包为 jQuery 插件。但是，感谢那里的代码，我设法找到了 jQuery-Watermark，它完全符合我的要求。

【解决方案2】：

更新，感谢 chrisdpratt，我实际上找到了一个插件，可以满足我的要求：

演示：http://labs.mario.ec/jq-watermark/

来源：https://github.com/marioestrada/jQuery-Watermark

【讨论】：