1

"username"以下のコードでは、jQueryを使用して単語を値フィールドに入力したいと思います。次に、ユーザーが入力ボックスを選択すると、「username」という単語が消え、ユーザーがユーザー名を入力するための空の入力フィールドが残ります。

これはjQueryで実行できますか？

<p class="login-username">
    <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10">
</p>
4

8 に答える 8

4

placeholderそのためにHTML5を使用できます

<input type="text" placeholder="Username" />

そして、古いブラウザ用に修正します（それはあなたが求めていた正確な部分です）

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

ソース

アップデート

jQueryを介してHTMLを変更し、入力フィールドにプレースホルダーを追加するには、これを行うことができます

$("input").prop("placeholder", "username");

デモ

于 2012-11-20T00:57:33.740 に答える
1

プレースホルダー属性はおそらくあなたが望むものですが、あなたの質問に答えるために：

$(".login-username input").val("username");
$(".login-username input").on("focus", function() {
  if($(this).val() == "username") {
    $(this).val("");
  }
}).on("blur", function() {
  if($(this).val() == "") {
    $(this).val("username");
  }
});
于 2012-11-20T00:59:27.227 に答える
1 
$("#user_login").val("username");


$("#user_login").focus(function(){
    $(this).val("");
});

実例： http： //jsfiddle.net/jbB35/

于 2012-11-20T00:59:28.723 に答える
0

オプション1：jQueryプラグイン（または自分で作成）

選択できるデフォルトのテキストプラグインがいくつかあります。私はこれに部分的です：http：//www.examplet.buss.hk/jquery/defaultText.php。

オプション2：HTML5プレースホルダー属性

placeholder属性（HTML5）を利用します。サポートされているブラウザで使用placeholderすると、必要な機能が提供されます。

<input type="text" id="user_login" placeholder="username" />

プレースホルダールートを選択した場合は、デフォルトのテキストを次のようにスタイル設定できます。

input::-webkit-input-placeholder {
    color:    #999;
}
input:-moz-placeholder {
    color:    #999;
}
input:-ms-input-placeholder {
    color:    #999;
}

詳細については、このSOの質問を参照してください。

注：placeholderすべてのブラウザでサポートされているわけではないことに注意してください。ここでサポートされているブラウザを表示できます。

于 2012-11-20T00:57:48.273 に答える
0

これにはjQueryは必要ありません。placeholder属性を使用するだけで済みます。

Dive into HTML5から：

HTML5がWebフォームにもたらす最初の改善点は、入力フィールドにプレースホルダーテキストを設定する機能です。フィールドが空である限り、プレースホルダーテキストが入力フィールド内に表示されます。入力フィールドをクリック（またはタブで移動）して入力を開始すると、プレースホルダーテキストが非表示になります。

http://diveintohtml5.info/forms.html#placeholder

于 2012-11-20T00:57:55.737 に答える
0

HTML5を使用すると、簡単に設定できplaceholder="username"、最新のブラウザがこれを自動的に処理します。ストラグラーを捕まえるために、HTML5に準拠していないブラウザーのプレースホルダーサポートを提供する、このスクリプトやこのshimスクリプトなどshivのスクリプトが多数あります。

于 2012-11-20T00:59:15.353 に答える
0

XHTMLを使用する場合

var user_login_text="Username";
$("#user_login").val=user_login_text;
$("#user_login").focus(function(){
    $(this).val("");
}).blur(function(){
    $(this).val(user_login_text);
});
于 2012-11-20T01:02:34.473 に答える
0

単純なJavaScriptを使用できます。

<p class="login-username">
<input type="text" name="log" id="user_login" class="input" value="Username" size="20" tabindex="10" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</p>
于 2012-11-20T01:07:31.977 に答える