Clever Geek Handbook

私のサイトに対する偏執的な態度のため、また専門的な配慮から、firefox + noscriptを使用しています。 私が最初にいくつかのサイトに行くとき、私はjsをオフにしてフィールドをクリックして、「search here」という碑文が誇示する場所を検索します。 プレースホルダー属性を問題なくサポートする最新のブラウザーを持っているという事実にもかかわらず。 原則として、どこにでもこのような恐怖があります：<input value = "Search the site" onfocus = "if（this.value == 'Search the site'）this.value == ''" onblur = "if（this.value = = ''）this.value == 'サイトを検索' ">（90年代後半のエコー）。



この世界の進歩により、この問題は<input>の限界を超えましたが、この本質は変わりません。 さらに高度な、値から値を削除し、タイトルに配置-それは良いでしょう。 幸いなことに、標準を作成する人たちはこのビジネスを見て、この目的のために特別なプレースホルダー属性をタグに装備することにしました。 ブラウザ開発者はすぐにこの機能を実装しましたが、その後IEは再び道を歩みました。 世界には6恐竜恐竜がインストールされているコンピューターがたくさんあることを思い出す価値はないと思います。7はもちろん、8ほどです。また、MSIEのメンバーはこの属性を贅沢すぎると考えており、9日には含まれていませんバージョン。 これらの誤解をすべて回避し、ページレイアウトを簡単にするために、小さなスクリプトを作成しました。 後で見ることができるように、これはjqueryに基づいていますが、別のフレームワークでリメイクするための簡単な操作の助けにはなりません。 



(function($) { /** * Ability for placeholder * usage: <input placeholder="any text"> */ $(function() { // if modernizr is available replace by var placeholder_support = Modernizr.input.placeholder; var placeholder_support = !!('placeholder' in document.createElement( 'input' )); if (!placeholder_support) { var inputs = $('input[placeholder]'), len = inputs.length, input, placeholder_class = 'placeholder'; while (len--) { inputs[len].value = inputs[len].value ? inputs[len].value : inputs.eq(len).addClass(placeholder_class).attr('placeholder'); inputs.eq(len).focus(function() { var th = $(this); if (this.value == th.attr('placeholder')) { th.removeClass(placeholder_class); this.value = ''; } }).blur(function() { var th = $(this); if (this.value == '') { th.addClass(placeholder_class); this.value = th.attr('placeholder'); } }); (function(input) { $(input.form).bind('submit', function() { if (input.value == $(input).attr('placeholder')) input.value = ''; }); }(inputs[len])); } } }); }(jQuery));


アクティブなプレースホルダーを持つ関数がプレースホルダークラスを追加することに気づかなかったかもしれません。プレースホルダークラスは、-webkit-input-placeholder、input ::-webkit-input-placeholder、input：-moz-placeholderと組み合わせて使用​​できます。



PS：私はこのソリューションに固有のふりをすることは決してありません。これはボイラープレートシリーズのレイアウトに使用するコードの一部にすぎません。



UPD：ここで離婚したすべてのハリバラのうち、唯一の本当の注意はrwzからでした 。その値はこのように正しく再定義されていません。 このステートメントは、上記のメソッドの普遍性を否定します。 そのため、これらの欠点のない別のソリューションを作成することにしました。 

 (function($) { $(function() { var placeholder_support = !!('placeholder' in document.createElement( 'input' )); if (!placeholder_support) { var body = $(document.body); $('input[placeholder]').each(function(){ var tpl = '<div class="placeholder" style="position:absolute;overflow:hidden;white-space:nowrap"/>', th = $(this), position = th.offset(), height = th.height(), width = th.width(), placeholder = $(tpl).appendTo(body) .css({ top: position.top, left: position.left, width: width, height: height, padding: ((th.innerHeight(true) - height) / 2) + 'px ' + ((th.innerWidth(true) - width) / 2) + 'px ' }) .text(th.attr('placeholder')) .addClass(th.attr('class')) ; placeholder.bind('click focus', function(){placeholder.hide();th.focus();}); th.bind('blur', function(){if (th.val() == '') placeholder.show()}); }); } }); }(jQuery));


この方法を使用する際の考慮事項：

  1. .placeholderクラスには、入力と同じサイズと行の高さを割り当てる必要があります。 すべての入力クラスがプレースホルダーdivにコピーされます
  2. inpuがposition：のコンテナにある場合、スクロールするときの位置が正しくありません。 必要に応じて、簡単に修正します。
  3. まあ、それに応じて速度。 許容できるものの、ページ全体に散らばる100個の入力で、firefoxは177ミリ秒を示しました（テストでは、属性はdata-placeholderに変更されました）。
  4. 縮小されたコードは597バイトかかります-必要に応じて削減できます


他の短所や短所があるかもしれませんが、私は喜んであなたのコメントを読み、適切な変更を加えます。



PPS：この記事は、jsが有効になっているかどうかについてではありません。 これは、特にMSIEの松葉杖であり、他のブラウザの場合もあります。


More articles:


All Articles