web-dev-qa-db-ja.com

入力時のデフォルトテキスト

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

javascripthtmltextinput
29
Jaro

最新のブラウザでは、フィールドに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/utec

69
moff

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'" />
14
Kyle Rozendo

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

_.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クラスセット、およびtoggleText()関数を指すJavascriptハンドラーを使用して入力ボックスを追加します（これを行うには event listeners を使用できます）ご希望の場合）

_<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">
_
3
Alex Rozanski

または単に

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

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

3
montrealmike

使いやすさの観点から、入力コンポーネントのテキストは、ユーザーの入力目的でのみ保持する必要があります。ユーザーが触れない場合、入力のデフォルト値は有効である必要があります。

プレースホルダーテキストが入力を埋める方法のヒントとなる場合は、入力がいっぱいになったときにも表示できる入力の近くに配置することをお勧めします。さらに、テキストコンポーネント内でプレースホルダーテキストを使用すると、トラブルが発生する可能性があります。点字デバイスを使用します。

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

2
Jawa

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

1
Jaro

私がやったことは、最新のブラウザにプレースホルダー属性を設定することです：

<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);
});

これは私のために働く。

1
Kevin

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

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

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

IE、Firefox、Chrome、さらに有名なフォーカスの問題があるiPhone Safariでも動作します。

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

OR

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

0
Tanin

プレースホルダー属性を使用できます。
np。 <input type="text" name="fname" placeholder="First name">
check http://www.w3schools.com/tags/att_input_placeholder.asp

0
user2464189