3

サイトにテキストがある入力ボックスがあります

<input type="text" value="Enter Name"/>

ここで、ユーザーが何かを入力し始める (最初の文字を入力する) と、テキストが消えて、必要な入力を入力できるようになることを追加する必要があります。

私はやってみました：

$('#input').keypress(function () {
                $(this).val("");
            });

ただし、ユーザーはテキストを削除し続けるため、1文字しか入力できません。

これはどのように行うことができますか？

ありがとう

4

4 に答える 4

4

プレースホルダーを使用してこれを行うことができます

デモ： http： //jsfiddle.net/9VhYZ/

一部のブラウザはまだこれをサポートしていません。フォールバックを追加することも、クロスブラウザでサポートすることをお勧めします：http: //davidwalsh.name/html5-placeholder

更新：あなたはこのようにあなたが求めることをすることができます：http： //jsfiddle.net/9VhYZ/1/

$('#input').one("keydown", function () {
    $(this).val("");
});
于 2011-11-01T15:29:27.117 に答える
1

多くの場合、この手法はゴーストと呼ばれます。プレースホルダー属性とプログレッシブ エンハンスメントを使用できます。多くの場合、クラスを使用しghostInputてページの読み込み時にグローバルに適用することで、グローバル クラスを追加するだけでゴースト プロパティを要素に追加できます。

<input type="text" value="Enter Name" placeholder="something" class='ghostInput'/>

$(function() {
  $(".ghostInput").focus(function() {
    if ($(this).val() == $(this).attr("placeholder")) {
      $(this).val("");
    }
  }).blur(function() {
    if ($(this).val() == "") {
      $(this).val($(this).attr("placeholder"));
    }
  });
});

多くの場合、これを使用して、入力に別のクラスを追加および削除して、テキストを少し明るく見せることができます。これはかなり簡単です。focus() で削除し、空の blur() に追加するだけです。

于 2011-11-01T15:32:25.093 に答える
0

テキストボックスのデフォルト値を実装しています。

2つのオプションがあります。

HTML5はすべてのブラウザでサポートされているわけではないので、両方を試してみます。

于 2011-11-01T15:30:06.350 に答える
0

JavaScriptの代わりにHTML5のプレースホルダー属性を使用することをお勧めします。

<input type="text" value="Enter Name" placeholder="something"/>

警告-どこでもサポートされているわけではありませんが、古いブラウザを無視する余裕がある場合は、これが間違いなく解決策です。

于 2011-11-01T15:27:54.630 に答える