50

ユーザーが入力要素をクリックすると消える説明テキストを入力要素内に挿入したいと思います。

私はそれが非常に一般的なトリックであることを知っていますが、それを行う方法がわかりません。

最も簡単でより良い解決策は何ですか？

4

13 に答える 13

136

HTML5を使用している場合は、placeholder属性を使用できます。

<input type="text" name="user" placeholder="Username">
于 2010-03-18T21:43:56.100 に答える
48 
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

より良い例は、SO検索ボタンです！それが私がこのコードを入手した場所です。ページソースの表示は貴重なツールです。

于 2009-04-23T12:25:18.107 に答える
40

私の意見では、最良の解決策は画像も入力のデフォルト値の使用も含まない。むしろ、DavidDorwardのソリューションのように見えます。

実装は簡単で、JavaScriptを使用しないスクリーンリーダーやユーザーにとってはうまく機能しません。

ここで2つの例を見てください：http： //attardi.org/labels/

私は通常、フォームで2番目の方法（labels2）を使用します。

于 2010-01-05T09:19:00.280 に答える
5

一般的なアプローチは、デフォルト値をラベルとして使用し、フィールドがフォーカスを取得したときにそれを削除することです。

アクセシビリティとユーザビリティに影響があるため、このアプローチは本当に嫌いです。

代わりに、フィールドの横にある標準要素を使用することから始めます。

次に、JavaScriptがアクティブな場合は、祖先要素にクラスを設定します。これにより、いくつかの新しいスタイルがそれを適用します。

  • 入力とラベルを含むdivを相対的に配置します
  • ラベルを絶対に配置します
  • 入力をラベルの上に絶対に配置します
  • 入力の境界線を削除し、その背景色を透明に設定します

次に、入力がフォーカスを失うたびに、入力に値があるかどうかをテストします。含まれている場合は、祖先要素にクラス（ "hide-label"など）があることを確認します。そうでない場合は、そのクラスがないことを確認します。

入力がフォーカスを取得するたびに、そのクラスを設定します。

スタイルシートは、セレクターでそのクラス名を使用してラベルを非表示にします（text-indent：-9999px;通常を使用）。

このアプローチは、JSが無効になっているユーザーやスクリーンリーダーを使用しているユーザーを含むすべてのユーザーに適切なエクスペリエンスを提供します。

于 2009-04-23T12:37:38.920 に答える
3

@Cory Walkerによって提案されたソリューションと@Rafaelの拡張機能をまとめましたが、@ Tex witchの1つの形式は私にとって少し複雑で、うまくいけば解決策を思いつきました。

javascriptとCSSを無効にしたエラープルーフ。

フォームフィールドの背景色を操作して、ラベルを表示/非表示にします。

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

動作中のスクリプトを表示します：http：//mattr.co.uk/work/form_label.html

于 2011-09-14T12:06:10.887 に答える
1 
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

onblurイベントも追加します。

于 2011-04-04T18:38:00.327 に答える
1

入力を開始すると消えます。空の場合は再び表示されます。

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

最も簡単な方法...

于 2012-11-05T09:31:54.150 に答える
1

PlaceHolder.JSを使用してください。これはすべてのブラウザーで機能し、html5に準拠していないブラウザーでは非常に簡単です http://jamesallardice.github.io/Placeholders.js/

于 2013-12-12T06:40:10.060 に答える
1

HTMLプロパティのプレースホルダーとタグのテキストエリアに関するヒントの1つとして、との間にスペースがないことを確認してください。スペースがない<textarea>と</textarea>、プレースホルダーが機能しません。たとえば、次のようになります。

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

間にスペースがあるため、これは機能しません...

于 2016-06-27T11:41:52.110 に答える
0

これを使って

スタイル：

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</style>

html：

javascript：

function defaultLabelClean() {
    inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)  {
        if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
            inputs[i].value = '';
        }
    }
}

function defaultLabelAttachEvents(element, label) {
    element.setAttribute("innerLabel", label);
    element.onfocus = function(e) {
        if (this.value==label) {
            this.className = 'defaultLabel_on';
            this.value = '';
        }
    }
    element.onblur = function(e) {
        if (this.value=='') {
            this.className = 'defaultLabel_off';
            this.value = element.getAttribute("innerLabel");
        }
    }

    if (element.value=='') {
        element.className = 'defaultLabel_off';
        element.value = element.getAttribute("innerLabel");
    }
}


defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");

フォームを送信する前に、defaultLabelClean（）関数を呼び出すことを忘れないでください。

よくできました

于 2010-03-18T21:33:36.297 に答える
0

そのためのJavascriptコードは必要ありません...
プレースホルダー属性を意味していると思います。コードは次のとおりです。

<input type="text" placeholder="Your descriptive text goes here...">



デフォルトのテキストは灰色がかった色になり、クリックすると消えます。

于 2016-03-10T02:07:29.880 に答える
0

上記のように、ラベルを保持し、プレースホルダーを使用しないのは良いことだと思います。ここで説明されているように、UXに適しています： https ：//www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

入力フィールド内にラベルがある例：codepen.io/jdax/pen/mEBJNa

于 2018-12-31T22:10:15.753 に答える
-2

これは簡単な例です。画像をオーバーレイするだけです（好きな言葉で）。私はどこかでこのテクニックを見ました。私はプロトタイプライブラリを使用しているので、他のものを使用する場合は変更する必要があります。window.loadの後に画像を読み込む場合、javascriptが無効になっていると、正常に失敗します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
    <meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <style type="text/css" >

        input.searcher
        {
            background-image: url(/images/search_back.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-x-position: left;
            background-y-position: center;
        }

    </style>

    <script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
    <input type="text" id="q" name="q" value="" />

    <script type="text/javascript" language="JavaScript" >
    //  <![CDATA[
        function f(e){
            $('q').removeClassName('searcher');
        }

        function b(e){
            if ( $F('q') == '' )
            {
                $('q').addClassName('searcher');
            }
        }

        Event.observe( 'q', 'focus', f);
        Event.observe( 'q', 'blur', b);
        Event.observe( window, 'load', b);

    //  ]]>
    </script>
</body>
</html>
于 2009-04-23T14:10:48.167 に答える