javascript - 占位符在焦点上仍然可见

Question

我希望我的<input>元素具有占位符文本，当输入具有焦点（并且为空）时，该文本仍然可见。但是，我不能使用实际placeholder属性，因为它仅在输入没有焦点时显示在 IE10 和 Safari 中，并且在旧 IE 版本中不受支持。什么是跨浏览器解决方案，最好不使用 jquery（因为我没有其他理由使用它）？

Answer 1

使用 jQuery 找到了这个解决方案。http://jsfiddle.net/NXAWW/

---

为在用户输入文本时保持可见的输入创建 html 水印文本：

关键是这个

.keyup(function(){
    var $input = $(this);
    if ($input.val().trim() != '') {
        $placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test',''));
        //$placeholder.val('');
    } else {
        $placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test',''));
    }
});

完整的 Jquery 代码

// 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: 100,
    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($input.val().trim() + $input.attr('placeholder').replace('test',''));
        //$placeholder.val('');
    } else {
        $placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test',''));
    }
});

Answer 2

如果您可以使用 jQuery，这里是一个选项

演示http://jsfiddle.net/kevinPHPkevin/FdjJv/8/

$(function()
{
  $('input').each(function() 
  {
     $(this).val($(this).attr('holder'));
  });

  $('input').focus(function()
  {
    if($(this).attr('holder')==$(this).val())
    {
      $(this).val('');
    }
  });
  $('input').focusout(function()
  {
     if($.trim($(this).val())=='')
     {
       var holder = $(this).attr('holder');
       $(this).val(holder);
     }
  });
});

对于完整的浏览器支持，您可以使用诸如http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html之类的库

已编辑

我会推荐一个 jQuery 插件，然后你可以将它分配给你的输入

演示http://jsfiddle.net/kevinPHPkevin/5j55m/136/

<input type='text' placeholder='this is a test' />
<input type='password' placeholder='testing password' />