Question

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

我正在寻找一个会：

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

Answer 1

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

尽管如此，我还是嘲笑了一个概念证明，欢迎您随意使用。但是，我必须使占位符文本变得如此轻，以至于几乎看不到它太多（这就是为什么默认行为是为了清除它）。

// 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评论的新更改。在将文本输入输入后，占位符现在将清除。

Answer 2

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

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

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

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

2 个答案: