フロントエンド開発では、入力にプレースホルダー属性を設定する必要があることがよくありますが、プレースホルダーは 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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
