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

Question

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

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

score 104 · Accepted Answer

少し JavaScript を使用すると、次のようになります。

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

HTML5 には、このための便利な属性があり、次のように呼ばれplaceholderます。

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

ただし、この属性は古いブラウザではサポートされていません。

score 24 · Accepted Answer

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

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

score 23 · Accepted Answer

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

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

score 13 · Accepted Answer

あなたの状況では、HTML入力が簡単でシンプルなため、おそらく属性タイトルを追加できると思います

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

score 13 · Accepted Answer

With HTML5, you can now use the placeholder attribute like this:

<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

score 2 · Accepted Answer

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

$(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>

[参照]

score 2 · Accepted Answer

私は同じ問題を抱えており、このコードをアプリケーションに追加しましたが、うまく機能します。

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

ステップ-2：あなたの地域に以下のコードを書いてください。

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

入力ボックスにプレースホルダーが表示されるようになりました。

score 0 · Accepted Answer

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

score -4 · Accepted Answer

ツールチップテキストを定義する

<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">

スクリプトの初期化と構成

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>

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

9 に答える 9

Related

Reference