-1

うまくいけば、私はそのタイトルであまりにも多くの人々を怖がらせていません：-$

JavascriptまたはjQueryを使用して、フォームテキスト入力を作成するにはどうすればよいですか。

  1. デフォルト値/プレースホルダーテキストを表示する
  2. ホバーすると、デフォルト値/プレースホルダーテキストを別のテキストに置き換えます
  3. クリックすると、別のテキストが少し消えます
  4. そして最後に、ユーザーが入力を開始したら、デフォルト/プレースホルダーのテキストを完全に削除します

これが画像のこの質問の肉と骨です：

アクション＃1

この手順では、テキスト入力ボックスにデフォルトのテキストまたはプレースホルダーを配置するだけです。簡単に簡単。

アクション＃2

現在、ユーザーは入力ボックスにカーソルを合わせています。彼らが何を検索できるかについての提案をしたいと思います。アクション＃1のテキストからこのテキストへの素晴らしいフェード効果は驚異的です。

アクション＃3

ここでは、提案テキストをフェードアウトし、ユーザーが独自の検索用語を入力するように促しています。

アクション＃4

最後に、ユーザーが入力を開始し、提案テキストが完全に削除されます。

4

1 に答える 1

2

これは基本的なHTML、jQuery、CSSです。

HTML：

<input type="text" placeholder="Search..." data-placeholder-hover="Search for stuff!" />​

JavaScript：

$('input[data-placeholder-hover]').on('mouseenter mouseleave', function() {
    var $this = $(this);

    $this.toggleClass('hovered');

    var temp = $this.prop('placeholder');

    $this.prop('placeholder', $this.data('placeholder-hover'))
    $this.data('placeholder-hover', temp);
});​

CSS：

input.hovered::-webkit-input-placeholder {
    color: red;
}

input.hovered:-moz-placeholder {
    color: red;
}

input.hovered:-ms-input-placeholder {
    color: red;
}​

デモ： http： //jsfiddle.net/b94mb/

:focusおよび他の疑似セレクターを使用して、テキストボックスのスタイルをさらに設定できます：http： //jsfiddle.net/b94mb/4/

于 2012-12-24T09:19:44.630 に答える