web-dev-qa-db-ja.com

IE10でプレースホルダーに焦点を当てる

WebKitおよびFirefoxでは、inputのplaceholderのテキストはfocusに留まります。これはinput.val実際には何かが入っています。

IE10に同じことを強制する良い方法はありますか？

javascriptjqueryinternet-explorer-10placeholder
62
Aaron Yodaiken

：-ms-input-placeholder pseudo-classInternet Explorer Developer Center のドキュメントは、これが設計どおりに機能していることを示唆しているようです。

プレースホルダーテキストは、フィールドにフォーカスが置かれるまで、つまりフィールドに入力できるようになるまで、指定されたスタイルで表示されます。フィールドにフォーカスがあると、入力フィールドの通常のスタイルに戻り、プレースホルダーテキストが消えます。

編集：この動作を模倣する必要がある場合は、プレースホルダーポリフィルライブラリ（デフォルト値を設定し、入力ボックスにグレーのテキストをフロート表示し、など）IEの古いバージョンで動作します。それらはおそらくプレースホルダー機能を検出し、ブラウザーに委ねる機能があるため、変更する必要があります。また、これには「ブラウザ検出」コードの匂いがあります。

更新：「IEプレースホルダーテキストが消える」という質問 Twitterで尋ねられた ＃AskIE 質問2014年6月19日のセッションと @ IEDevChat応答済み 「この動作に対するアクティブなバグがあります。次のバージョンでは修正が提供されます」

42
Kevin Hakanson

IE開発者は AskIE Twitterでのセッション中に応答しました IEDevChat これは 既知のバグ in IE BugList that将来のバージョンで修正されます。

更新：-残念ながら、プレースホルダーの動作はIE11でも同じですが、Edge/Spartanバージョンで動作するようです。

10
Vivek Pratap Singh

IE 10+でプレースホルダーをフィールドフォーカスにとどめる良い方法はありませんが、ラベルをプレースホルダーに置き換えようとしている場合は、これを見てください。

http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-i-e-float-labels/

これは、プレースホルダーとラベルを組み合わせてユーザーエクスペリエンスを向上させる方法です。

3
Mike Starov

IE11にはまだ修正プログラムがないため、この問題を分類するために使用した回避策を共有すると思いました。

私の例では、IE11はプレースホルダー値をテキストエリア内の実際の値として追加しました。

テンプレートビューには次のものがあります。

<textarea placeholder="Type your message">
</textarea>

IE11のフロントエンドでレンダリングされたものは次のとおりです。

<textarea placeholder="Type your message">
    Type your message
</textarea>

したがって、ユーザーがフィールドに焦点を合わせていると、カーソルは「..message here」文字列の最後にありました-奇妙です！

私の回避策は、ロード時に要素に初期クラスを追加することでした。次に、クラスが存在するかどうかを確認する「フォーカス」バインドイベントの基本-存在する場合は、valを削除してからクラスも削除します。そのため、ユーザーがフィールドにフォーカスするとすぐに、値は空の文字列にリセットされます。

バインドイベントは次のとおりです（この特定の例は、動的にロードされるモーダル上にあります-これを単純化できます）。

$(document).on( "focus", '.textarea', function () {
    if ($(this).hasClass('placeholder-val-present')) {
        $(this).val("").removeClass('placeholder-val-present');
    }
});

ユーザーがフィールドからタブで移動するとプレースホルダーが再度追加され、IE11や他のすべてのブラウザーで期待どおりに正常に動作するため、これはうまく機能します。

これはかなりニッチな例だと思いますが、他の人にとっては便利かもしれません！

1
James