web-dev-qa-db-ja.com

HTML入力フィールドのヒント

ユーザーにテキストフィールドに入力する必要のあるヒントを提供したいと思います。ただし、値を設定しても、ユーザーがテキストフィールドをクリックしても消えません。どうすれば消えますか？

<form action="input_password.htm">
  <p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
htmltextfieldhint
29
Frank Vilea

Javascriptを介して入力フィールドにonFocusイベントを添付する必要があります。

<input type="text" onfocus="this.value=''" value="..." ... />
23
Marc B

少しのJavaScript

<input value="Enter username.." onfocus="if (this.value == 'Enter username..') this.value=''" ... />

HTML5には、プレースホルダーと呼ばれるこのためのNice属性があります

<input placeholder="Enter username.." ... />

しかし、上記は古いブラウザではサポートされていません。

95
aorcsik

ヒントを与える最良の方法は、次のようなプレースホルダーです。

<input.... placeholder="hint".../>

17
Kunal

あなたの状況、あなたのhtml入力の簡単でシンプルなために、おそらく属性titleを追加できると思います

<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
13
Jasonw

HTML5では、次のようにプレースホルダー属性を使用できるようになりました。

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

http://www.w3schools.com/tags/att_input_placeholder.asp

9
J.Hendrix

これはまさにあなたが望むものです

$(document).tooltip({ selector: "[title]",
                              placement: "top",
                              trigger: "focus",
                              animation: false}); 
<form id="form">
    <label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
    <input id="myinput1" type="text" title="This tooltip persists" />
    <input id="myinput2" type="text" title="This one also" />
</form>

[ ref ]

3
raghavsood33

私は同じ問題を抱えており、このコードをアプリケーションに追加し、その作業をうまく行っています。

ステップ-1：jquery.placeholder.jsプラグインを追加しました

ステップ-2：お住まいの地域で以下のコードを記述します。

$(function () {
       $('input, textarea').placeholder();
});

そして今、私は入力ボックスにプレースホルダーを見ることができます！

2
sharad kumar singh

あなたが背景のテキストのようであれば、もちろん、入力フィールドでラベルを使用し、CSSを使用して入力上にラベルを配置すると言います。 JSでは、入力が値を受け取ったときにラベルをフェードアウトし、入力が空のときにラベルをフェードインします。このように、ユーザーが説明を送信することは、偶然であろうと意図的であろうと不可能です。

0
afaolek