javascript - jQuery 占位符/提示 使提示保持在焦点上的 JavaScript

Question

有数百个 jQuery 占位符/提示插件。但没有人做我想让它做的事

我正在寻找一个能够:

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

Answer 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 已更新，以反射(reflect)基于 OP 评论的新更改。在输入中输入文本后，占位符现在会清除。