1

何百もの jQuery プレースホルダー/ヒント プラグインがあります。しかし、私がやりたいことをするものはありません

私は次のようなものを探しています：

  • ユーザーがフィールドにフォーカスしたときにヒントをフェードしますが、ユーザーが入力を開始するまでヒントをクリアしません (StackOverflow/iOS のものなど)。
  • HTML5 プレースホルダー属性で動作します。
  • jQueryで構築
  • クロスブラウザ（IE7/IE8含む）
  • 目立たない JavaScript を使用
  • 理想的にはパスワードフィールドでも動作します
4

2 に答える 2

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 のコメントに基づく新しい変更が反映されました。テキストが入力に入力された後、プレースホルダーがクリアされるようになりました。

于 2011-08-12T22:14:09.800 に答える
1

更新、chrisdpratt のおかげで、私がやりたいことを実行するプラグインを実際に見つけました。

デモ: http://labs.mario.ec/jq-watermark/

ソース: https://github.com/marioestrada/jQuery-Watermark

于 2011-08-19T13:05:38.740 に答える