찾다

집 >웹 프론트엔드 >JS 튜토리얼 >focus_jquery를 얻고 잃는 jQuery 텍스트 상자의 간단한 예

focus_jquery를 얻고 잃는 jQuery 텍스트 상자의 간단한 예

WBOY
WBOY원래의
2016-05-16 16:59:38935검색

버전 1

css 코드 부분:

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

.focus {
border: 1px solid #f00;
background: #fcc;
}

포커스가 획득되면 포커스 스타일 추가, 테두리 추가, 배경색 변경 #fcc

html 코드 부분:

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

< Body & <🎜
<🎜 gt;/gt; : & lt;/label & gt;
& lt; textarea id = "msg" columns = "2" color = "20" >
;

:input은 모든 입력, 텍스트 영역, 선택 및 버튼 요소와 일치합니다.

jQuery 코드 부분:




코드 복사


코드는 다음과 같습니다.


< 스크립트 유형= "text/javascript">
$(function(){
$(":input").focus(function(){
) $(this).addClass("focus" );                                                                                                 ~                                                      .

:input을 사용하여 모든 입력 요소를 일치시킵니다. 포커스가 오면 스타일 포커스를 추가하고 $(this)를 통해 현재 요소를 자동으로 식별합니다. focus() 메서드는 focus 이벤트가 발생할 때 실행되는 함수입니다. Blur() 메서드는 focus 이벤트가 발생할 때 실행되는 함수입니다.


버전 2:

텍스트 상자에 프롬프트 메시지로 기본 콘텐츠가 있는 경우 포커스를 받은 후 사라져야 합니다. 다음과 같이 수정할 수 있습니다.
코드 복사


코드는 다음과 같습니다.