web-dev-qa-db-ja.com

Firefoxやhtml5タグオプションをサポートしていない他のブラウザでプレースホルダーテキストを取得するにはどうすればよいですか？

これは、ChromeおよびHTML5のプレースホルダーテキストをサポートするその他のブラウザーで機能します

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

ただし、3.5以前のFirefox、明らかにIE8、および場合によっては他のブラウザでは機能しません。

すべての古いブラウザをサポートするために、同じことをどのように達成しますか（できればHTML/CSSで-提案を受け入れない場合）？すべてのブラウザではないにしても、少なくともFirefoxとIE。

SafariとChromeはすでにそれ（またはとにかく最新バージョン）をサポートしています。

ありがとう。

htmlcssfirefoxinternet-explorer-8
18
marcamillion

ちなみに...誰かが興味を持っているなら...私はSOOOニースであるjQueryプラグインであるニースエレガントなソリューションを見つけました。

これは文字通り、1行のjQuery、縮小されたjsプラグイン、および入力の単純なクラス名です。

http://labs.thesedays.com/projects/jquery/clearfield/

これは私が発見した中で最も美しいもので、htmlの「プレースホルダー」の次にあります。

2
marcamillion

いつの日か、これを適切に文書化することに取り掛かりますが、次の例を参照してください： http://dorward.me.uk/tmp/label-work/example.html

つまり、<label>を使用して透明な<input>の下に<div>を配置し、背景色と境界線を指定します。

次に、JSを使用して、フォーカスに基づいてラベルを表示するかどうかを決定します。

JSが使用できない場合は、異なるスタイルを適用して、代わりに要素の横にラベルを配置します。

valueを使用する場合とは異なり、これにより、フォーカスされたコンテンツのみを表示するデバイス（スクリーンリーダーなど）がコンテンツにアクセスできなくなり、passwordタイプの入力に対しても機能します。

19
Quentin

私はこれを使用します： https://github.com/danbentley/placeholder
軽量でシンプルなjQueryプラグイン。

15
Florian

これが私がどこでも機能しているとわかった最も簡単な解決策です：

<input id="search" 
   name="search" 
   onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}" 
   onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>

PLACEHOLDERを自分のものに交換してください。

現時点では、FF3は「input」要素の「placeholder」属性をまだサポートしていません。 FF4、Opera11、Chrome8は部分的にサポートしています。つまり、フィールドにプレースホルダーテキストを表示しますが、ユーザーがフィールドにフォーカスしたときに削除しません。これは、まったくサポートしないよりも悪いことです。

7
Marios Zindilis

JQueryで作成した次のスニペットを使用します。ページ上の任意のテキストボックスにtextbox-auto-clearのクラスを追加するだけで、準備が整います。

<input type="text" value="Please enter your name" class="textbox-auto-clear" />

$(".textbox-auto-clear").each(function(){
    var origValue = $(this).val(); // Store the original value
    $(this).focus(function(){
        if($(this).val() == origValue) {
            $(this).val('');
        }
    });
    $(this).blur(function(){
        if($(this).val() == '') {
            $(this).val(origValue);
        }
    });
});

HTML5ブラウザーのプレースホルダー属性を引き続き使用することを想定しています。その場合、ブラウザーの検出を行い、それをサポートしていないブラウザーにのみjQueryソリューションを適用する必要があります。

さらに良いことに、この回答で概説されているように、 Modernizer ライブラリを使用できます。 jQueryを介した特定のHTML 5機能のサポートの検出

4
Marko

これがMooToolsプラグインで、まだサポートしていないブラウザにプレースホルダーを表示します。

http://mootools.net/forge/p/form_placeholder

4
Matt

私はこれを使用します： https://github.com/Jayphen/placeholder この軽量でシンプルなjQueryプラグインはdanbentley/placeholderのフォークです。

利点：一時的に入力される入力フィールドにクラス「プレースホルダー」を追加します。 Css ".placeholder {color：silver}"は、ポリフィルテキストを通常の入力テキストではなくプレースホルダーのように見せます。

短所：パスワードフィールドのプレースホルダーをポリフィルしません。

3
Pro Backup

秘訣は、JavaScript関数onBlur（）とonFocus（）を使用することです。

これが私のために働いたコードです：

<script language="javascript" type="text/javascript" >

    var hint_color = "grey", field_color = null;

    var hinted = true;

    function hint() { // set the default text

        document.getElementById('mce-EMAIL').style.color = hint_color;
        document.getElementById('mce-EMAIL').value = "<?php echo SUBSCRIPTION_HINT; ?>";

        hinted = true;

    }

    function hintIfEmpty() { // set the default text, only if the field is empty

        if (document.getElementById('mce-EMAIL').value == '') hint();

    }

    function removeHint() {

        if (hinted) {

            document.getElementById('mce-EMAIL').style.color = field_color;
            document.getElementById('mce-EMAIL').value = "";

            hinted = false;

        }

    }

    function send() {

        document.getElementById('subscription_form').submit();
        hint();

    }

</script>

<div style="position:absolute; display: block; top:10; left:10; ">
<form id="subscription_form" action="<?php echo SUBSCRIPTION_LINK; ?>" method="post" target="_blank">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required>
    <a href="javascript:send()"><font style="position: relative; top:-1px;"><b>ok</b></font></a>

</form>
</div>

<script language="javascript" type="text/javascript" >

    field_color = document.getElementById('mce-EMAIL').style.color;
    hint();

</script>

SUBSCRIPTION_HINT（つまり、「あなたの電子メール」）とSUBSCRIPTION_LINK（つまり、EN mailchimp埋め込みコードの「action」タグの値...）は、ローカリゼーションに使用されるPHP定数です。

2
Gilbou

「placeholder」の場合、Firefoxで作業するには、属性を追加するだけです。

::-moz-プレースホルダー

cSSタグで。

1
Nicholas

私のために働く、あなたのCSSをに変更する

::-webkit-input-placeholder {
  color: #999;
}
0
Tamilselvan K