집 > 기사 > 웹 프론트엔드 > 프롬프트 텍스트 방식의 라벨 입력 상자 입력

프롬프트 텍스트 방식의 라벨 입력 상자 입력

小云云원래의: 2018-01-26 13:18:328555검색

이 글에서는 프롬프트 텍스트 효과로 입력 상자를 구현하기 위한 입력 태그를 주로 소개합니다(두 가지 방법). 필요한 친구들이 참고하면 도움이 될 것입니다.

방법 1: HTML5는 CSS3과 협력하여 프롬프트 텍스트가 있는 입력 상자를 구현합니다(js 제거).

웹킷에 고유한 CSS는 CSS3의 애니메이션 효과 및 의사 클래스를 사용하여 내부 텍스트 스타일을 제어할 수 있습니다. , 우리는 시스템 로그인, 검색 등에 매우 적합한 애니메이션으로 입력 상자를 쉽게 만들 수 있습니다. 관심이 있다면 이 기사를 참조할 수 있으며, 캐리어 개발 시스템으로서 Webkit에는 확실히 광범위한 요구 사항이 있습니다. Html5와 CSS3를 사용하면 JS를 많이 줄일 수 있을 뿐만 아니라 더 원활한 흐름을 보장할 수 있습니다.

대화 상자를 선택하면 입력 후 프롬프트 텍스트가 더 밝아지고 사라집니다. 이제 일반적인 방법은 입력 레이블 뒤에 레이블을 추가하는 것입니다. JS 컨트롤을 사용하십시오.

HTML5의 출현으로 우리는 더 나은 방법을 갖게 되었습니다.

<input type="text" placeholder="用户名或邮件地址" name="username"/>

사용자 텍스트 프롬프트로 사용할 수 있는 자리 표시자 태그가 있는 것을 봤습니다. 이것은 매우 편리합니다. 하지만 가장 완벽하게 하려면 텍스트를 더 밝게 만들거나 프롬프트 파일을 선택한 후 스타일을 수정해야 합니다.

input::-webkit-input-placeholder { 
color: #999; 
-webkit-transition: color.5s; 
} 
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { 
color: #c2c2c2; 
-webkit-transition: color.5s; 
}

-webkit-input-placeholder는 웹킷 고유의 CSS로 내부의 텍스트 스타일을 제어할 수 있습니다. CSS3의 애니메이션 효과와 의사 클래스를 사용하면 로그인 시 사용할 수 있는 애니메이션 입력 상자를 쉽게 만들 수 있습니다. 시스템에 검색 및 기타 위치가 좋습니다. 물론 IE6과 호환되기를 원한다면 이 방법은 작동하지 않습니다. 그러나 Ie9는 자리 표시자 태그도 지원하지만 색상을 수정할 수는 없습니다.
그럼 지원되지 않으면 어떻게 해야 하나요? Jquery를 직접 사용하여 도움을 받을 수 있으므로 이 기사의 범위를 벗어납니다.

데모와 데모 주소를 알려주세요. 전체 효과를 보려면 Webkit 브라우저를 사용해야 합니다. 매우 편리하지 않나요?

방법 2: JS 컨트롤

코드는 다음과 같습니다.

<script type="text/javascript">
 $(document).ready(function(){
 $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型输入框验证 
  $(this).focus(function(){
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  } 
  });
 })
 $("#keydown .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  $(this).keyup(function(){
  var val=$(this).val();
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  }
  })
  }) 
 })
</script>

효과는 다음과 같습니다.

클릭하면 프롬프트 텍스트가 사라지지만, 내용을 입력한 후 포커스가 사라집니다. 또한 프롬프트 텍스트가 표시되지 않으며 비밀번호 상자가 텍스트 상자와 다르며 비밀번호 상자의 값이 표시되지 않습니다.

방법 3: 라벨에 직접 쓰기(더 실용적입니다)

코드는 다음과 같습니다:

<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value=&#39;&#39;;this.style.color=&#39;#000&#39;}" onBlur="if(!value){value=defaultValue;this.style.color=&#39;#999&#39;}" style ="#999;"/>
    </p>

프롬프트 텍스트 방식의 라벨 입력 상자 입력

관련 기사