JavaScript 텍스트 상자 워터마크/자리 표시자(워터마크/자리 표시자) 구현 방법_javascript 기술

Firefox/Chrome/Opera는 특정 버전부터 이 기능을 지원해 왔지만 IE 시리즈, 심지어 IE9도 아직 지원하지 않기 때문에 자리 표시자 기능을 지원하지 않는 이들 브라우저와 호환하려면 JavaScript를 사용해야 합니다.

일반적인 관행
현재 일반적으로 사용되는 관행은 다음과 같이 form 요소의 onfocus/onblur 이벤트를 통해 값을 변경하는 것입니다.

코드 복사 코드는 다음과 같습니다.

🎜>var el = document.getElementById("text1");
if (el.value == "")
el.value = "프롬프트 메시지";

el.onfocus = function () {
if (this.value == "프롬프트 메시지")
this.value = ""
}
el.onblur = function() {
if (this .value == " ")
this.value = "프롬프트 정보";
}



JQuery의 다양한 워터마크 플러그인(http:/ /archive.plugins.jquery.com/plugin-tags/watermark) 대부분 이 접근 방식을 채택하며 일부 스타일 및 기타 작업 설정도 포함될 수 있습니다.

폼 요소를 직접 조작하는 방식으로 편리하고 빠르며 더욱 실용적입니다.

그러나 단점도 있습니다.

일부 작업에서는 자동 완성, 확인 등과 같은 기능을 구현하기 위해 양식 요소의 값을 모니터링해야 합니다.
값이 필요합니다. 양식 제출 시 삭제
물론 여기에 나열되지 않은 다른 단점이 있을 수 있습니다.

더 나은 접근 방식
불필요한 문제를 방지하려면 양식 요소의 값을 변경하지 마세요.

먼저 아래와 같은 텍스트박스가 있다면

코드를 복사하세요 코드는 다음과 같습니다.

텍스트 상자의 값은 변경할 수 없으므로 범위나 기타 요소를 추가하고 배치하는 방법밖에 없습니다. 절대 위치 지정을 통해 위치: 상대 컨테이너를 외부 프레임에 추가하여 프롬프트 정보가 오프셋되지 않도록 합니다.

코드 복사 코드는 다음과 같습니다.

위치:절대;">프롬프트 메시지

실수로 Taobao의 로그인 페이지를 발견해도 추가 작업이 필요하지 않습니다. 위치 레이어를 추가하면 포장용 상대 컨테이너가 오프셋을 발생시키지 않으므로 다음과 같이 텍스트 상자 앞에 프롬프트 정보 표시만 배치하면 됩니다.

코드 복사 코드는 다음과 같습니다. 프롬프트 메시지

이런 방식으로 생성된 마크업은 더 간결해졌습니다.
해당 스타일

이제 최종 렌더링된 마크업이 결정되었으므로 이제 더 아름답게 보이도록 해당 스타일을 다음과 같이 정의해야 합니다.

코드 복사 코드는 다음과 같습니다. /* 라벨 스타일의 기본 스타일 */

.w-label {

위치 : 절대값;
여백: 0;
글꼴 크기: .8em;
불투명도: 1; 🎜>/* 마커 숨기기*/
.w-hide {
visibility: hide;
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" 유형, fn);
},
/* 텍스트 상자 워터마크/자리 표시자*/
watermark = function(element, text) {
if ( !(워터마크의 인스턴스) ))
새 워터마크 반환(요소, 텍스트);
var place = document.createElement("span");//정보 표시 표시
element.parentNode.insertBefore(place, element);// 양식 요소
place.className = "w-label";
place.innerHTML = text
place.style.height = place.style.lineHeight = 요소 .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", "")
}
function onClick() {
hideIfHasValue();
try {
element.focus && element.focus()
} catch(예) {}
}
// 각 이벤트 등록
hideIfHasValue();
addEvent(element, "focus", onFocus)
addEvent(element, "blur", onBlur)
addEvent (element, " keyup", hideIfHasValue);
addEvent(place, "click", onClick);
// 워터마크 취소
this.unload = function() {
removeEvent(element, " focus", onFocus );
removeEvent(element, "blur", onBlur);
removeEvent(element, "keyup", hideIfHasValue)
removeEvent(place, "click", onClick); .removeChild(place);
element.place = null;
};


위 코드는 각각 양식 요소의 포커스/블러/키업을 전달합니다. 프롬프트 정보 표시의 표시, 숨기기 및 스타일을 제어하는 ​​데 사용됩니다. 또한 프롬프트 정보 표시의 클릭 이벤트는 이를 숨기고 양식 요소에 대한 포커스를 얻는 데 사용됩니다.
마지막으로 워터마크를 취소할 수 있는 언로드 방법이 제공됩니다.
특정 용도

위의 js와 css를 사용하여 워터마크 기능을 직접 구현하는 방법은 다음과 같습니다.




코드를 복사하세요

코드는 다음과 같습니다.

<script> <div class="codebody" id="code73270">var m1 = watermark(document.getElementById("text1"), "프롬프트 메시지"); >addEvent(document .getElementById("button1"), "click", function() { <BR>m1.unload(); <BR>}) <BR></script>


html5 자리 표시자 호환
이제 위의 구현을 사용할 수 있으므로 html5 자리 표시자를 지원하지 않는 브라우저와 호환되는 것도 매우 간단합니다. 먼저 브라우저가 자리 표시자를 지원하는지 확인해야 합니다.

코드 복사

코드는 다음과 같습니다. var html5support = "placeholder" in document.createElement("input") 그런 다음 이를 지원하지 않는 html5 자리 표시자를 찾아보세요. 양식 요소의 자리 표시자 콘텐츠를 추출하려면 구현 방법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. placeHolderForm = function(form) { var ph, elems = form.elements, html5support = "placeholder" in document.createElement("input");

if (!html5support) {

for (var i = 0, l = elems.length; i ph = elems[ i].getAttribute("placeholder");
if (ph) elems[i].ph = watermark(elems[i], ph)
}
}
}


데모 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

html5 자리 표시자를 지원하지 않는 양식 요소에 워터마크 적용 ; /legend>

텍스트 상자:
; /li>

• 
  비밀번호 상자:
  ;li>
  여러 줄 텍스트:
  <br>
;/fieldset>

<script> <BR>placeHolderForm(document.getElementById("form2")) <BR><BR> <BR>끝<BR> 이 시점에서 모든 기능이 완료되었으며 모든 코드를 입력합니다. <BR>다운로드하려면 클릭<BR>, 추가 요구 사항이 있는 경우 직접 수정할 수 있습니다. <BR>저자:囧月 </script>

출처: http://lwme.cnblogs.com/