IE_jquery에서 텍스트 상자 및 비밀번호 상자 자리 표시자 효과를 지원하는 JQuery 플러그인 공유

이 플러그인은 오래 전에 작성되었으며 jQuery를 기반으로 하며 주로 IE에서 자리 표시자 효과를 구현하는 데 사용됩니다. 텍스트 및 비밀번호 입력 상자를 모두 지원할 수 있습니다.

자리 표시자는 HTML5의 새로운 속성입니다. 입력 속성이 설정되면 값의 내용이 텍스트 상자에 회색 프롬프트로 표시됩니다. 텍스트 상자에 초점이 맞춰지면 프롬프트 텍스트가 사라집니다.

다운로드 주소: http://xiazai.jb51.net/201501/other/placeholderfriend.rar

구현 코드는 다음과 같습니다.

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

(함수($) {
/**
* 꽃이 없는 나무
* 2012/11/28 15:12
​*/

var placeholderfriend = {
초점: 함수 {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
If (idValue) {
        s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
if (clsValue) {
        s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
}

//자리 표시자가 지원되는지 확인
함수 isPlaceholer() {
var input = document.createElement('input');
입력 시 "자리 표시자"를 반환합니다.
}
//지원되지 않는 코드
if (!isPlaceholer()) {
$(함수() {

var 형식 = $(this);

//모든 텍스트 상자를 탐색하고 자리표시자 시뮬레이션 이벤트를 추가합니다
var elements = form.find("input[type='text'][placeholder]");
       elements.each(function() {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
If (p값) {
                if (sValue == '') {
          s.val(pValue);
          }
}
});

elements.focus(function() {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
If (sValue && pValue) {
If (sValue == pValue) {
          s.val('');
          }
}
});

elements.blur(function() {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
If (!s값) {
        s.val(pValue);
}
});

//모든 비밀번호 상자를 순회하고 자리표시자 시뮬레이션 이벤트를 추가합니다
var elementsPass = form.find("input[type='password'][placeholder]");
       elementsPass.each(function(i) {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
If (p값) {
                if (sValue == '') {
//DOM은 유형 수정을 지원하지 않습니다. 비밀번호 상자 속성을 복사하고 새 DOM을 생성해야 합니다
               var html = this.outerHTML ||                  html = html.replace(/s*type=(['"])?password1/gi, " type=text placeholderfriend")
             .replace(/s*(?:value|on[a-z] |name)(=(['"])?S*1)?/gi, " ")
             .replace(/s*placeholderfriend/, " placeholderfriend value='" pValue
"' " "onfocus='placeholderfriendfocus(this); ");
            var idValue = s.attr("id");
                if (idValue) {
          s.attr("id", idValue "placeholderfriend");
            }
            var clsValue = s.attr("class");
if (clsValue) {
          s.attr("class", clsValue "placeholderfriend");
            }
          s.hide();
          s.after(html);
          }
}
});

elementsPass.blur(function() {

        var s = $(this);
        var sValue = s.val();
            if (sValue == '') {
          var idValue = s.attr("id");
              if (idValue) {
            s.attr("id", idValue "placeholderfriend");
          }
          var clsValue = s.attr("class");
If (clsValue) {
            s.attr("class", clsValue "placeholderfriend");
          }
            s.hide().next().show();
}
});

});

}
window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);

사용 방법은 매우 간단합니다. 예는 다음과 같습니다.

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