js互換プレースホルダ属性_javascriptスキルの詳細説明

.net バックエンド開発プログラマとして、私のブログのほとんどはフロントエンド関連のブログ投稿です。方向転換を検討してフロントエンド開発に切り替える時期が来ているでしょうか...

ちょっと愚痴ですが、最近転職すべきかどうか迷っていて、選ぶのが難しいです。

フロントエンドの続き、今回は入力ボックスのプレースホルダー属性について話しましょう。

html5 の新しい属性は、入力ボックスに値が入力されていない場合に表示されるプロンプト テキスト (独自の理解) です。例:

とても便利そうですが、HTML をサポートしているブラウザー バージョンでのみ表示できるため、完璧を求める私のような開発者にとっては非常に不快です。

インターネット上で多くの情報を見つけ、多くの専門家がすでに解決策を見つけていますが、それらにはすべていくつかの欠陥があります。ここでは統合と変更を加えます。

(他の人のコードを何回読んだのか、アドレスは何なのか忘れてしまいました。他の原作者にお詫びを申し上げます。著作権上の問題がある場合は、私に連絡してください。-.-)

この種の拡張機能は、ブラウザのインターフェース機能を美化したようなものだと私は考えており、自然が最も美しいと常々主張しています。したがって、この属性をサポートするブラウザー バージョンでは、他の変更を行うことはあまりありません。

まず、属性がサポートされているかどうかを判断します:

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

if (!('placeholder' in document .createElement( 'input'))) { }

サポートされていない場合は、ここでジョブを実行します。

プレースホルダー属性を持つすべての input:text / input:password / textarea を取り出し、それぞれのプレースホルダー属性値を取り出して、関数を模倣し、各ラベルの後にラベル label を追加して、入力時にプレースホルダー値を表示します。 value の場合は表示文字列がクリアされ、入力値が削除された場合は文字列が表示されます。

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

var $element = $(this),プレースホルダー = $ element.attr('プレースホルダー');

if (プレースホルダー) {
// テキスト ボックス ID
var elementId = $element.attr('id');
if (!elementId) {
var now = new Date( );
elementId = 'lbl_placeholder' now.getSeconds() now.getMilliseconds();
$element.attr('id', elementId);
}

// プレースホルダーの値を表示するラベル label を追加します
var $label = $('', {
html: $element.val() ? '' : placeholder,
'for': elementId,
css:
{
位置: 'absolute',
カーソル: 'text',
color: '#a9a9a9',
fontSize: $ element.css('fontSize'),
fontFamily: $element.css('fontFamily')
}
}).insertAfter($element);

// バインドイベント
var _setPosition = function () {
$label.css({ marginTop: GetStringNumValue($element.css('marginTop')) 8 'px', marginLeft: '- ' (GetStringNumValue($element.css('width')) - 6) 'px' });
}
var _resetPlaceholder = function () {
if ($element.val()) { $ label.html(null); }
else {
_setPosition();
$label.html(placeholder);
}
}
_setPosition();
$ element.on('フォーカスブラー入力キーアッププロパティ変更リセットプレースホルダー', _resetPlaceholder);

コードは非常に簡単です。注意してください:

1. ラベルの margin-top / margin-left。プロジェクトではブートストラップ フレームワークを使用しているため、入力ボックスの内部スペースは「padding: 4px 6px;」に設定されているため、対応するピクセル値は次のようになります。ここでインデントされます。

2. GetStringNumValue() は、正規表現を使用して文字列から数値を抽出する独自のメソッドです。たとえば、「123px」は 123 を返します。

3. IE でサポートされていないバージョンの場合、propertychange は非常に優れた方法であり、完璧な組み合わせです。 ...

4. 拡張メソッドresetplaceholderは、jsを使用して入力ボックスの値を変更（代入、クリア）するときに、対応するプレースホルダーの値を設定するために使用されます。

効果:

——IE8

——IE9