ホームページ > 記事 > ウェブフロントエンド > IE とプレースホルダーの互換性attribute_html/css_WEB-ITnose
IE とプレースホルダーの互換性attribute_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:34:341203ブラウズ
フロントエンド開発では、入力にプレースホルダー属性を設定する必要があることがよくありますが、プレースホルダーは HTML5 の新しい属性であり、IE10 以下では互換性がありません。
ネットで調べてみると、実は以下の方法で簡単にできることが分かりました:
<script type="text/javascript"> if (!('placeholder' in document.createElement('input'))) { $('input[placeholder],textarea[placeholder]').each(function() { var that = $(this), text = that.attr('placeholder'); if (that.val() === "") { that.val(text).addClass('placeholder'); } that.focus(function() { if (that.val() === text) { that.val("").removeClass('placeholder'); } }).blur(function() { if (that.val() === "") { that.val(text).addClass('placeholder'); } }).closest('form').submit(function() { if (that.val() === text) { that.val(''); } }); }); }<script> このコードはわかりやすいのですが、使ってみるとtype=password型がサポートされていないことが分かりました。 , そこで、JPlaceHolder .js を入手するまで探し続けました。とても使いやすくて良い感じです
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""></head><body> <input type="password" placeholder="密码"> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script src="JPlaceHolder.js"></script></body></html>
ダウンロードアドレス: JPlaceHolder.js
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。