자리 표시자 effect_jquery를 달성하기 위한 솔루션 요약

자리 표시자는 html5d5fd7aea971a85678ba271703566ebfd의 속성입니다. 입력 필드가 비어 있을 때 힌트가 표시됩니다. 고급 브라우저는 이 속성을 지원하지만(예: 10/11 텍스트는 포커스를 얻으면 사라짐) ie6/7/8/9는 이를 지원하지 않습니다. 모든 주요 브라우저와 호환되고 일관된 렌더링 효과를 유지하기 위해 다음 세 가지 솔루션은 참고용일 뿐입니다.

옵션 1:

원래 속성 자리 표시자를 버리고 형제 노드 범위를 입력에 추가하고 범위에 대한 절대 위치 지정(상위 노드는 position:relative;)을 설정하여 입력 위에 위치하도록 합니다. HTML 코드 조각은 다음과 같습니다.

<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="text" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span>
  </div>
</li>
<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="password" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span>
  </div>
</li>

js 코드는 다음과 같습니다. (플러그인 형식 없이 그냥 함수만 작성했습니다. ㅎㅎ)

function _placeholderText(phInput, phText) { //定义函数，传递2个参数——input输入框和text提示文本的id或者class
  var $input = $(phInput);
  var $text = $(phText);
  $input.each(function() { //页面加载时遍历所有仿placeholder的input
    var _this = $(this);
    var _text = _this.siblings(phText);
    if($.trim(_this.val()) == '') {
      _this.val("");
      _text.show();
    } else {
      _text.hide();
    }
  });
  $text.on('click', function() { //点击提示信息，input获取焦点
    $(this).siblings(phInput).focus();
  });
  $input.on('input propertychange blur', function() { //为input注册事件，value值改变（其实是属性发生变化）时以及失去焦点时判断value值是否为空
    var _this = $(this);
    if(_this.val() == '') {
      _this.siblings(phText).show();
    } else {
      _this.siblings(phText).hide();
    }
  });
}

_placeholderText('.phInput', '.phText'); //调用函数

개인 요약: 솔루션 1은 로그인 페이지에는 적합하지만, 새로운 프롬프트 텍스트 라벨을 추가해야 하기 때문에 백그라운드 양식 양식과 프런트엔드 검색 페이지에는 적합하지 않습니다. 이는 그다지 친숙하지 않습니다.

옵션 2:

또한 원래 속성 자리 표시자를 버리고 d5fd7aea971a85678ba271703566ebfd에 phText="휴대폰 번호/이메일 주소" 속성을 추가하세요. 기본적으로 값은 프롬프트 텍스트이고 d5fd7aea971a85678ba271703566ebfd이 포커스를 받으면 색상은 회색입니다. 값이 phText 속성 값과 같으면 값은 비어 있습니다. 비어 있습니다. value 값은 프롬프트 텍스트입니다. js 코드는 다음과 같습니다.

function inputJsDIY(obj, colorTip, colorTxt) { //定义函数，传递3个参数——DOM对象、提示文本的颜色值、输入文本的颜色值
  colorTip = colorTip || '#aaaaaa';
  colorTxt = colorTxt || '#666666';
  obj.each(function() {
    var _this = $(this);
    _this.css({"color": colorTip}); //输入框颜色默认置为提示文本的颜色值
    if($.trim(_this.val()) == "") { //判断value值是否为空，若为空则value值赋值等于提示文本
      _this.val(_this.attr("phText"));
    } else if(_this.val() != _this.attr("phText")) {
      _this.css({"color": colorTxt}); //正常的输入文本颜色值
    }
  });
  obj.on("focus", function() { //获取焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if(value == _this.attr("phText")) {
      _this.val("");
    }
    _this.css({"color": colorTxt});
  });
  obj.on("blur", function() { //失去焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if($.trim(value) == "") {
      _this.val($(this).attr("phText")).css({"color": colorTip});
    }
  });
  obj.parents("form").on("submit", function() { //提交表单时去除提示文本（把提示文本置空）
    obj.each(function() {
      var _this = $(this);
      if(_this.val() == _this.attr("phText")) {
        _this.val("");
      }
    });
  });
}

inputJsDIY($('.phInput'), '#aaa', '#666'); //调用函数

개인 요약: 옵션 2는 백엔드 페이지 형식과 프런트엔드 검색 페이지에 더 적합합니다. 조작이 간단하고 추가 태그가 없습니다. 단점은 비밀번호 유형 d5fd7aea971a85678ba271703566ebfd에 사용할 수 없으며 d5fd7aea971a85678ba271703566ebfd에 포커스가 있을 때(값이 phText 속성 값과 동일한 경우) 프롬프트 텍스트가 사라진다는 점입니다. 이는 원래 자리 표시자 속성과 다릅니다.

또한 phText 속성을 placeholder 속성으로 변경할 수도 있습니다. 지원되지 않는 브라우저는 js를 사용하여 document.createElement('input')}를 호출하도록 결정합니다. 두 번째 옵션. 이 절충안에는 단점도 있으며 결과는 브라우저마다 정확히 동일하지 않습니다.

옵션 3:

자리 표시자를 지원하지 않는 브라우저에 대한 메서드를 작성하세요. 먼저 d5fd7aea971a85678ba271703566ebfd에 값을 할당하고 색상을 회색으로 설정하세요. 자리 표시자 값으로 커서를 Front(this.createTextRange 및 this.setSelectionRange)로 이동합니다. 입력 작업이 발생하면 먼저 값을 null로 설정한 후 입력 값을 받습니다. 또한, 794332e4da1b97221ff0ba8bc66903c4에는 23efcc05e98690ceeb219581933e4231를 추가해야 입력 작업이 발생할 때 6a6686d0a4c5365e06a40fb6e3c092cd숨긴 다음 794332e4da1b97221ff0ba8bc66903c4를 표시하고 포커스를 둡니다. 이 솔루션에는 몇 가지 사소한 결함도 있습니다. 즉, 마우스 오른쪽 버튼으로 붙여넣을 때 버그가 나타납니다.

일반적으로 여러 옵션에는 장점과 단점이 있습니다. 저는 로그인 페이지에 옵션 1을 사용하는 것을 선호합니다. 프레젠테이션 효과는 완전히 동일합니다. 새 탭을 추가하는 것만으로도 번거롭지 않습니다. 백그라운드 폼과 프런트엔드 검색 페이지에서는 옵션 2를 선호하는데, 이는 포커스를 얻을 때 프롬프트 텍스트가 사라진다는 점을 제외하면 간단하고 효과적입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.