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

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

WBOY
풀어 주다: 2016-05-16 16:59:38
원래의
935명이 탐색했습니다.

버전 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:

코드 복사


코드는 다음과 같습니다.

최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿