jQuery는 텍스트 상자의 기본값을 설정하고 제거하는 기능을 구현합니다.
- 韦小宝원래의
- 2017-11-28 10:00:321436검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.