JavaScriptテキストボックスのウォーターマーク/プレースホルダー(ウォーターマーク/プレースホルダー)実装方法_JavaScriptスキル

Firefox/Chrome/Opera はあるバージョンからこの機能をサポートしていますが、IE シリーズは IE9 でもまだサポートしていないため、プレースホルダー機能をサポートしていないこれらのブラウザと互換性を持たせるには JavaScript を使用する必要があります。

一般的な方法
現在一般的に使用されている方法は、次のように、form 要素の onfocus/onblur イベントを通じて値を変更することです。

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

<script> 🎜>var el = document.getElementById("text1"); <br>if (el.value == "") <br>el.value = "プロンプトメッセージ"; <br><br>el.onfocus = function () { <br>if (this.value == "プロンプト メッセージ") <br>this.value = "" <br>}; <br>el.onblur = function() { <br>if (this .value == " ") <br>this.value = "プロンプトメッセージ"; <br></script>


JQuery のさまざまなウォーターマーク プラグイン (http:/ /archive.plugins.jquery .com/plugin-tags/watermark) はほとんどがこのアプローチを採用しており、一部のスタイルやその他の操作の設定も含まれる場合があります。

このメソッドはフォーム要素を直接操作するため、便利で高速でより実用的です。

しかし、欠点もあります。

オートコンプリート、検証など、一部の操作では、関数を実装するためにフォーム要素の値を監視する必要もあります。
その値はフォームが送信されるとクリアされます
もちろん、ここには記載されていない他の欠点もあるかもしれません。

より良いアプローチ
不要なトラブルを避けるために、form 要素の値の変更は避けてください。

まず、次のようなテキストボックスがある場合:

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

テキストボックスの値は変更できないので、span などの要素を追加して配置するしかありません。絶対配置によってテキスト ボックスの上に位置:相対コンテナを追加して、プロンプト情報がオフセットされないようにします。

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

プロンプト メッセージ

タオバオのログイン ページを誤って発見しても、追加の追加は必要ありません。パッケージング用のposition:relative コンテナーのレイヤーを追加してもオフセットは発生しないため、次のようにテキスト ボックスの前にプロンプ​​ト情報マークを配置するだけで済みます。

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

プロンプト メッセージ

この方法で生成されたマークアップはより簡潔です。

対応するスタイル
最終的にレンダリングされるマークアップが決定したので、次のように、より美しく見えるように対応するスタイルを定義する必要があります:

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

/* ラベル スタイルのメイン スタイル */

.w-label {
position : 絶対;
パディング: 0 0 0 6px;
フォントサイズ: .8em;
不透明度: 1; 🎜>/* Hide Marker*/
.w-hide {
visibility: hidden;
opacity: 0;
}
/* フォーム要素がフォーカスされたときのマーカーの色*/
.w -active {
color: #ddd;
}


すると、HTML は次のようになります:

コードをコピーします

コードは次のとおりです: プロンプトメッセージ :

コードをコピー


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

/* イベント バインディング*/
var addEvent = document.addEventListener ?
function(element, type, fn) {
element.addEventListener(type, fn, false); >} :
function(element, type, fn) {
element.attachEvent("on" type, fn);
},
/* イベントのバインド解除*/
RemoveEvent = document .removeEventListener ?
function(element, type, fn) {
element.removeEventListener(type, fn, false);
} :
function(element, type, fn) {
element .detachEvent("on" type, fn);
},
/* テキスト ボックスのウォーターマーク/プレースホルダー*/
ウォーターマーク = function(element, text) {
if ( !(このウォーターマークのインスタンス) ))
return new Watermark(element, text);
var place = document.createElement("span");//プロンプト情報マーク
element.parentNode.insertBefore(place, element);//フォーム要素の前の位置に挿入します。
place.className = "w-label";
place.innerHTML = text;
place.style.height = place.style.lineHeight = element .offsetHeight "px ";// 高さと行の高さを中央に設定します
element.place = this;
function HideIfHasValue() {
if (element.value && place.className.indexOf("w- hide") = = -1)
place.className = " w-hide";
}
function onFocus() {
hideIfHasValue()
if (!element.value && place .className.indexOf ("w-active") == -1)
place.className = " w-active";
}
function onBlur() {
if (!element.value ) {
place.className = place.className.replace(" w-active", "");
place.className = place.className.replace(" w-hide", ""); >}
関数 onClick() {
hideIfHasValue();
try {
element.focus && element.focus();
} catch (ex) {}
}
// 各イベントを登録します
hideIfHasValue();
addEvent(element, "blur", onBlur); keyup", hideIfHasValue);
addEvent(place, "click", onClick);
// ウォーターマークをキャンセル
this.unload = function() {
removeEvent(element, " focus", onFocus );
removeEvent(element, "blur", onBlur);
removeEvent(element, "click", onClick); .removeChild(place);
element.place = null;
};


上記のコードは、フォーム要素のフォーカス/ブラー/キーアップをそれぞれ渡します。プロンプト情報マークの表示、非表示、およびスタイルを制御するために使用されます。さらに、プロンプト情報マークのクリック イベントは、プロンプト情報マークを非表示にしてフォーム要素にフォーカスを取得するために使用されます。
最後に、ウォーターマークをキャンセルするためのアンロード メソッドが提供されます。
具体的な使用法
上記の js と css を使用して、ウォーターマーク機能を直接実装できます。以下は、ウォーターマークの適用とキャンセルを示しています。

コードをコピーします


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

<script> var m1 = Watermark(document.getElementById("text1"), "プロンプト メッセージ"); >addEvent(document .getElementById("button1"), "click", function() { </u>m1.unload(); </a>}); 🎜>html5 プレースホルダーとの互換性 </u></a></span> 上記の実装が利用可能になったので、html5 プレースホルダーをサポートしていないブラウザーとの互換性も非常に簡単になります。 まず、ブラウザーがプレースホルダーをサポートしているかどうかを判断する必要があります: </div> <div class="codebody" id="code73270"> <br><br>コードをコピー <br><br><br> コードは次のとおりです。 <br><br>var html5support = "placeholder" in document.createElement("input"); <br> <br>次に、それをサポートしていない html5 プレースホルダーを参照します。 form 要素のプレースホルダーのコンテンツを抽出するには、実装は次のとおりです: </div> <br><br><br><div class="codetitle">コードをコピー <span><a style="CURSOR: pointer" data="40158" class="copybut" id="copybut40158" onclick="doCopy('code40158')"><u> コードは次のとおりです: </u></a> </span> placeHolderForm = function(form) { </div>var ph, elems = form.elements, <div class="codebody" id="code40158">html5support = "placeholder" in document.createElement("input"); </div>if (!html5support) { <br>for (var i = 0, l = elems.length; i <br>ph = elems[ i].getAttribute("placeholder"); <div class="codetitle">if (ph) elems[i].ph = Watermark(elems[i], ph); <span>} <a style="CURSOR: pointer" data="39495" class="copybut" id="copybut39495" onclick="doCopy('code39495')">} <u></u> </a>デモ コードは次のとおりです: </span> </div> <div class="codebody" id="code39495"> <br><br>コードをコピーします<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code14928"> <br><form id="form2"> <br><fieldset> <br><legend><strong>HTML5 プレースホルダーをサポートしていないフォーム要素にウォーターマークを適用します</strong> ; /legend> <br><li> <br><input type="text" placeholder="テキスト ボックス テキスト ボックス" />< ; /li> <br><li> <br><input type="password" placeholder="パスワードボックス" /> ;li><br>複数行テキスト: <br><textarea プレースホルダー="複数行テキスト"></li> <br></ul>< ;/fieldset> <br><script> <br></script> >終了
この時点で、すべての機能が完了しました。すべてのコードを入力してください:
クリックしてダウンロード
。追加の必要がある場合は、自分で変更できます。
著者:囧月
出典: http://lwme.cnblogs.com/