jQuery는 텍스트 상자의 기본값을 설정하고 제거하는 기능을 구현합니다.-JS 튜토리얼-php.cn

jQuery는 텍스트 상자의 기본값을 설정하고 제거하는 기능을 구현합니다.

韦小宝

풀어 주다： 2017-11-28 10:00:32

원래의

1482명이 탐색했습니다.

jQuery에서 구현한 텍스트 상자 기본값은 마우스 움직임을 감지합니다. 이 장에서는 jQuery를 사용하여 마우스 움직임을 감지하는 텍스트 상자 기본값 기능을 구현하는 방법을 소개합니다. jQuery코드가 있습니다~

예를 들어 텍스트 상자에 마우스 포커스가 가해지면 기본값이 지워지고 텍스트 상자에 입력 내용이 없고 마우스 포커스가 벗어나면 기본값으로 돌아갑니다. 값.
코드 예:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>程序员之家</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#email").focus(function(){ 
    var email_txt = $(this).val(); 
    if(email_txt == this.defaultValue){ 
      $(this).val(""); 
    } 
  }) 
  $("#email").blur(function(){ 
    var email_txt = $(this).val(); 
    if (email_txt == "") { 
      $(this).val(this.defaultValue); 
    } 
  }) 
})
</script> 
</head> 
<body> 
<p><input type="text" value="请输入邮箱地址" id="email"/></p> 
</body> 
</html>

로그인 후 복사

위의 코드는 우리의 요구 사항을 실현합니다. 다음은 구현 원칙에 대한 간략한 소개입니다.

매우 간단합니다. 텍스트에 초점을 등록하고 흐림 효과를 주기만 하면 됩니다. box 이벤트 처리 기능은 텍스트 상자에 포커스가 있을 때 텍스트 상자의 내용이 기본값과 동일하면 포커스가 텍스트 상자를 벗어날 때 텍스트 상자의 내용이 지워집니다. 텍스트 상자가 비어 있으면 기본값으로 복원됩니다.

또는 다음 코드를 사용하세요.

$(&#39;.default-value&#39;).each(function() {
       var default_value = this.value;
       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = &#39;&#39;;
               }
       });
       $(this).blur(function(){
               if(this.value == &#39;&#39;) {
                       this.value = default_value;
               }
       });
});

로그인 후 복사

위는 텍스트 상자의 기본값을 설정하고 제거하는 기능을 구현하는 jQuery의 내용입니다. 자세한 내용은 PHP 중국어 사이트 search를 참조하세요. 오~

관련 추천 :

jQuery 애니메이션 및 특수 효과에 대한 자세한 설명

jQuery 비밀 정보

Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명

위 내용은 jQuery는 텍스트 상자의 기본값을 설정하고 제거하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!