34

入力フィールドに空白のデフォルト テキストを設定し、要素がアクティブなときにそれをクリアする方法。

4

9 に答える 9

74

最新のブラウザーではplaceholder、フィールドに属性を設定して、デフォルトのテキストを設定できます。

<input type="text" placeholder="Type some text" id="myField" />

ただし、古いブラウザーでは、JavaScript を使用してフォーカス イベントとブラー イベントを取得できます。

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

デモ: http://jsbin.com/utecu

于 2009-07-09T09:58:34.693 に答える
14

onFocusおよびonBlurイベントを使用すると、これを実現できます。つまり、次のようになります。

onfocus="if(this.value=='EGTEXT')this.value=''"

と

onblur="if(this.value=='')this.value='EGTEXT'"

完全な例は次のとおりです。

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" />
于 2009-07-09T09:59:33.457 に答える
5

または単に

<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

これにより、ボックスがクリアされるとデフォルトのテキストはポストバックされませんが、ユーザーはボックスをクリアして、オートコンプリート スクリプトの場合にすべての結果を表示することもできます。

于 2011-02-01T21:14:48.320 に答える
3

非アクティブ状態とアクティブ状態のスタイルを宣言します。

.active {
    color: black;
}

.inactive {
    color: #909090;
}

状態の変更を処理する Javascript を追加します。

function toggleText(el)
{
    var v = el.value;

   //Remove text to allow editing
    if(v=="Default text") {
        el.value = "";
        el.className = "active";
    }
    else {
         //Remove whitespace
        if(v.indexOf(" ")!=-1) {
            split = v.split(" ").join("");
            v = split;
        }

          //Change to inactive state
        if(v=="") {
            el.value = "Default text";
            el.className = "inactive";
        }
    }
}

入力ボックスを追加し、デフォルト値セット、クラス セット、関数inactiveを指す Javascript ハンドラーを追加します (必要に応じて、イベント リスナーを使用してこれを行うことができます)。toggleText()

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">
于 2009-07-09T10:02:56.167 に答える
3

ユーザビリティの観点から、入力コンポーネント内のテキストは、ユーザーの入力目的でのみ保持する必要があります。ユーザーがそのままにしておくと、入力の可能なデフォルト値が有効になるはずです。

プレースホルダー テキストが入力の入力方法のヒントである場合は、入力が入力されたときにも見えるように、入力の近くに配置することをお勧めします。さらに、テキスト コンポーネント内でプレースホルダー テキストを使用すると、点字デバイスなどで問題が発生する可能性があります。

プレースホルダー テキストを使用する場合は、ユーザビリティ ガイドラインに関係なく、javascript を使用しないユーザー エージェントや js がオフになっている場合でも機能するように、目立たない方法で使用する必要があります。

于 2009-07-09T15:29:06.057 に答える
1

私がしたことは、最新のブラウザーのプレースホルダー属性を配置することです。

<input id='search' placeholder='Search' />

次に、JQuery を使用して古いブラウザーのフォールバックを作成しました。

var placeholder = $('search').attr('placeholder');
//Set the value
$('search').val(placeholder);

//On focus (when user clicks into the input)
$('search').focus(function() {
   if ($(this).val() == placeholder)
     $(this).val('');
});

//If they focus out of the box (tab or click out)
$('search').blur(function() {
   if ($(this).val() == '')
     $(this).val(placeholder);
});

これは私にとってはうまくいきます。

于 2014-10-23T14:03:29.623 に答える
1

jQueryプラグイン（http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/）を見つけて使用します:)

于 2009-07-10T11:20:48.380 に答える
0

このプラグインを使用できます（私は共著者です）

https://github.com/tanin47/jquery.default_text

入力フィールドを複製してそこに配置します。

IE、Firefox、Chrome、そしてフォーカスの問題で有名な iPhone Safari でも動作します。

このようにして、送信前に入力フィールドをクリアすることを心配する必要はありません。

また

HTML5のみにしたい場合は、入力フィールドで属性「プレースホルダー」を使用できます

于 2011-07-13T05:53:49.447 に答える