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

jQuery placeholder/hint JavaScript that keeps the hint on focus

本文关键字：提示 焦点 JavaScript 占位符 jQuery      更新时间：2023-09-26

有上百个jQuery占位符/提示插件。但是没有一个是我想要的

我在找一个可以:

  • 当用户聚焦在字段上时淡出提示，但直到用户开始输入(如StackOverflow/iOS)才清除提示
  • 将使用HTML5占位符属性。
    • 使用jQuery构建的
  • 跨浏览器(包括IE7/IE8)
  • 使用不显眼的JavaScript
  • 理想情况下也可以使用密码字段

@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'));
    }
});

UPDATE:代码和jsfiddle已经更新，以反映基于OP评论的新变化。现在，占位符在输入文本后清除。

更新，感谢chrisdpratt，我已经找到了一个插件，可以做我想做的事情:

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

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

相关文章：