下位バージョンのブラウザにおける HTML5 プレースホルダー新タグの非互換性問題の分析と解決策

下位バージョンのブラウザにおける HTML5 プレースホルダー新タグの非互換性問題の分析と解決策 _html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:46:02

オリジナル

1825 人が閲覧しました

プレースホルダー属性は、一般的に「プレースホルダー」として知られる HTML5 の新しい属性です。その機能は、フォーカスを取得するとデフォルト値が空白になり、フォーカスを失うと空白になります。デフォルトのテキストが表示されます。誰もがこのような効果を作成するために js/jquery を使用したことがあるはずです。現在、Mozilla Firefox 3.7、Apple Safari 4、Google Chrome 4、Opera11 などの最新のブラウザーでのみサポートされています。
HTML5 の入力にプレースホルダー属性が追加されました。入力フィールドの期待値のヒント情報 (ヒント) をテキスト形式で表示するために、入力にプレースホルダーを提供します。入力が空の場合にフィールドが表示されます。 .
例:

コードをコピーします

コードは次のとおりです:

プレースホルダーは操作が非常に便利で、開発効率が向上します。同時に、上位バージョンのブラウザーでのユーザーエクスペリエンスも非常に優れているため、私はこの属性をよく使用します。
ただし、IE9 以下のブラウザでは無効で、IE10 ではプレースホルダー属性をサポートしており、他のブラウザとパフォーマンスが一致しません
•IE10 では、マウスをクリックする（フォーカスを取得する）とプレースホルダーのテキストが消えます
• Firefox/Chrome/Safari のクリックは消えませんが、キーボードで入力するとテキストが消えます
では、開発者としてこの問題を克服する必要がありますか?現在、同様のソリューションがインターネット上に多数あり、実装アイデアは大きく 2 つのタイプに分けられます。
1. (方法 1) 入力の値を表示テキストとして使用し、グレーのスタイルをシミュレートし、フォーカスするon $("[placeholder]").val ()=="", Blur $("[placeholder]").val(this.defaultValue); (方法 2) value を使用せず、追加します。追加のタグ (スパン) を本文に追加し、絶対位置決めで入力をカバーします。
ここでは最初の方法を実装しているため、値が占有され、検証時に追加の判断が必要になるため、個人的には 2 番目の方法を使用することをお勧めします。
まず、現在のブラウザがプレースホルダー属性をサポートしているかどうかを確認します。

コードをコピーしますコードは次のとおりです:

function placeholderSupport() {
document.createElement('input') の 'placeholder' を返します
}

のキーコード:

コードをコピーコードは次のとおりです:

/*
*プレースホルダーは ie9 以下と互換性があります著者: Gao Fengming add 2016-1-27
*/
$(function(){
if(!placeholderSupport()){ / / ブラウザがプレースホルダーをサポートしているかどうかを判断します
$(document).ready(function(){
//デフォルトのトラバーサルループはプレースホルダー
$('[placeholder]').each(function(){
$(this).parent().append("" $(this).attr('placeholder') ""); )
$('[ placeholder]').blur(function(){
if($(this).val()!=""){ //現在の値が空でない場合、プレースホルダー
$(this).parent ().find('span.placeholder').hide();
}
else{
$(this).parent().find('スパン.プレースホルダー').show();
}
})
})

上記のコンテンツでは、下位バージョンのブラウザにおける新しい HTML5 プレースホルダータグの非互換性の分析と解決策を紹介します。お役に立てば幸いです。