JavaScript 및 jquery는 텍스트 상자 기본값 효과 code_javascript 기술 설정 및 제거를 구현합니다.

여기에서 얻고자 하는 효과는 텍스트 상자의 기본값을 설정하고 제거하는 것입니다. 아래와 같이 텍스트 상자에 마우스를 놓으면 회색 텍스트가 사라집니다.

1. 다음과 같이 입력 텍스트 상자에 onfocus 속성을 추가하는 간단한 방법을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

onfocus='if(this.value=="검색할 키워드를 입력하세요."){this.value="";} '
onblur='if(this.value==""){this.value="검색할 키워드를 입력하세요";};'>

실제로 onfocus 속성은 다음 코드와 같이 onfocus 속성을 통해 CSS 스타일을 변경할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

onfocus='if(this.value=="검색할 키워드를 입력하세요."){this.value="";} this.className="input01"'
onblur='if(this.value==""){this.value="검색할 키워드를 입력하세요";}; this.className="input02"'>

2. jquery를 사용하여 구현할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수() {

      var vdefault = $('#keyword').val();

$('#keyword').focus(function() { //포커스를 받을 때 값이 기본값이면 공백으로 설정

If ($(this).val() == vdefault) {
                  $(this).val("");
            }
        });
$('#keyword').blur(function() {
//포커스를 잃었을 때 값이 비어 있으면 기본값으로 설정
If ($(this).val()== "") {
                     $(this).val(vdefault) ;
            }
        });
});

물론 이를 구현하는 방법은 여러 가지가 있습니다. 제가 사용한 방법은 다음과 같습니다...