web-dev-qa-db-ja.com

クリック時に入力テキストのデフォルト値を削除

入力テキストがあります：

<input name="Email" type="text" id="Email" value="[email protected]" />

「プログラミングの質問は何ですか？具体的に」などのデフォルト値を設定します。 StackOverFlowで、ユーザーがクリックするとデフォルト値が消えます。

javascripthtmlinputdefault-value
59
Wassim AZIRAR

将来の参考のために、これを行うためのHTML5の方法を含めるためにIhaveを持っています。

<input name="Email" type="text" id="Email" value="[email protected]" placeholder="What's your programming question ? be specific." />

HTML5 DoctypeとHTML5準拠のブラウザを使用している場合、これは機能します。ただし、多くのブラウザは現在これをサポートしていないため、少なくともInternet Explorerユーザーはプレースホルダーを見ることができません。ただし、ソリューションについては http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ （ archive.org version ）を参照してください。これを使用すると、ほとんどのユーザーに機能を提供しながら、非常に近代的で標準に準拠したものになります。

また、提供されたリンクは十分にテストされ、十分に開発されたソリューションであり、すぐに使用できるはずです。

108
MvanGeest

EDIT：このソリューションは機能しますが、 MvanGeestの以下のソリューション を使用することをお勧めしますplaceholder-attributeおよびまだサポートしていないブラウザ用のjavascriptフォールバック。

MvanGeestの返信でJQueryフォールバックに相当するMootoolsを探している場合は、 here is one です。

-

フォームをタブで移動するキーボードユーザーをサポートするには、おそらくonfocusおよびonblurイベントを使用する必要があります。

以下に例を示します。

<input type="text" value="[email protected]" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = '[email protected]';}"
 onfocus="if (this.value == '[email protected]') {this.value = '';}" />
64
mqchen

これはいくぶんクリーンです。入力の「defaultValue」プロパティの使用に注意してください。

<script>
function onBlur(el) {
    if (el.value == '') {
        el.value = el.defaultValue;
    }
}
function onFocus(el) {
    if (el.value == el.defaultValue) {
        el.value = '';
    }
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>
26
Jani

JQueryを使用すると、次のことができます。

$("input:text").each(function ()
{
    // store default value
    var v = this.value;

    $(this).blur(function ()
    {
        // if input is empty, reset value to default 
        if (this.value.length == 0) this.value = v;
    }).focus(function ()
    {
        // when input is focused, clear its contents
        this.value = "";
    }); 
});

そして、次のように、これらすべてをカスタムプラグインに詰め込むことができます。

jQuery.fn.hideObtrusiveText = function ()
{
    return this.each(function ()
    {
        var v = this.value;

        $(this).blur(function ()
        {
            if (this.value.length == 0) this.value = v;
        }).focus(function ()
        {
            this.value = "";
        }); 
    });
};

プラグインの使用方法は次のとおりです。

$("input:text").hideObtrusiveText();

このコードを使用する利点は次のとおりです。

  • 目立たず、DOMを汚染しません
  • コードの再利用：複数のフィールドで機能します
  • 入力のデフォルト値を自動的に把握します



非jQueryアプローチ：

function hideObtrusiveText(id)
{
    var e = document.getElementById(id);

    var v = e.value;

    e.onfocus = function ()
    {
        e.value = "";
    };

    e.onblur = function ()
    {
        if (e.value.length == 0) e.value = v;
    };
}
7
cllpse

タグ内に次を入力し、onFocus = "value = ''"を追加するだけで、最終的なコードは次のようになります。

<input type="email" id="Email" onFocus="value=''">

これは、javascript onFocus（）イベントホルダーを使用します。

3
Myke

入力でplaceholderの代わりにvalueタグを使用するだけです

2
072et

<input name="Email" type="text" id="Email" placeholder="enter your question" />

プレースホルダー属性は、入力フィールドの予想値を説明する短いヒントを指定します（例：予想値のサンプル値または簡単な説明）。

ユーザーが値を入力する前に、短いヒントが入力フィールドに表示されます。

注：プレースホルダー属性は、テキスト、検索、url、tel、email、およびパスワードの入力タイプで機能します。

これが役立つと思います。

1
kkk

html5の「プレースホルダー」属性を使用して、次の方法でjsを使用せずにそれを行うことができます（ユーザーが入力し始めるとデフォルトのテキストは消えますが、クリックするだけではありません）

<input type="email" id="email" placeholder="[email protected]">

これを参照してください： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

1
c-h-a-r-a-n

これが簡単な方法です。

#animalは、DOMのボタンを表します。
#animal-valueは、対象となる入力IDです。

$("#animal").on('click', function(){
    var userVal = $("#animal-value").val(); // storing that value
    console.log(userVal); // logging the stored value to the console
    $("#animal-value").val('') // reseting it to empty
});
0
EsterlingAccime Youtuber

これがjQueryソリューションです。ユーザーが入力フィールドをクリアすると、常にデフォルト値が再表示されます。

<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="[email protected]" />

<script>
$("#Email").blur(
    function (){
        if ($(this).val() == "")
            $(this).val($(this).prop("defaultValue"));
        }
).focus(
    function (){
        if ($(this).val() == $(this).prop("defaultValue"))
            $(this).val("");
    }
);
</script>
0
Kent Munthe Caspersen

このような本当に簡単な答えは見なかったので、誰かの助けになるかもしれません。

var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }
0
Brian M

これは非常に単純なjavascriptです。私にとってはうまくいきます：

function sFocus (field) {
    if(field.value == 'Enter your search') {
        field.value = '';
    }
    field.className = "darkinput";
}

function sBlur (field) {
    if (field.value == '') {
        field.value = 'Enter your search';
        field.className = "lightinput";
    }
    else {
        field.className = "darkinput";
    }
}
0
ELO

価値を削除する理由その便利ですが、CSSを試してみませんか

input[submit] {
   font-size: 0 !important;
}

PHPをチェックおよび検証するには値が重要です

0
KingRider