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 이벤트 처리 기능은 텍스트 상자에 포커스가 있을 때 텍스트 상자의 내용이 기본값과 동일하면 포커스가 텍스트 상자를 벗어날 때 텍스트 상자의 내용이 지워집니다. 텍스트 상자가 비어 있으면 기본값으로 복원됩니다.
또는 다음 코드를 사용하세요.
$('.default-value').each(function() { var default_value = this.value; $(this).focus(function(){ if(this.value == default_value) { this.value = ''; } }); $(this).blur(function(){ if(this.value == '') { this.value = default_value; } }); });
위는 텍스트 상자의 기본값을 설정하고 제거하는 기능을 구현하는 jQuery의 내용입니다. 자세한 내용은 PHP 중국어 사이트search를 참조하세요. 오~
관련 추천 :
jQuery 애니메이션 및 특수 효과에 대한 자세한 설명
Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명
위 내용은 jQuery는 텍스트 상자의 기본값을 설정하고 제거하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!