> 웹 프론트엔드 > 프런트엔드 Q&A > 입력을 클릭하면 jquery가 이벤트를 트리거합니까?

입력을 클릭하면 jquery가 이벤트를 트리거합니까?

青灯夜游
풀어 주다: 2022-11-02 18:27:35
원래의
1991명이 탐색했습니다.

입력을 클릭하면 "포커스 이벤트"가 발생합니다. 이는 입력 요소가 선택되어 조작 가능하다는 의미이며, 페이지 화면에 작은 수직선이 깜박입니다. jquery에서는 "$(selector).focus()" 또는 "$(selector).focus(function)" 구문을 사용하여 focus() 메서드를 사용하여 포커스 이벤트를 요소에 바인딩하거나 트리거할 수 있습니다.

입력을 클릭하면 jquery가 이벤트를 트리거합니까?

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

jquery는 입력을 클릭하여 "포커스 이벤트"를 트리거합니다.

초점은 관심 있는 영역, 즉 현재 커서가 활성화되어 있는 위치입니다. 페이지 화면에서 깜박이는 작은 수직선은 웹 페이지의 컨트롤이 선택되어 작동 가능하다는 것을 나타냅니다. 마우스를 클릭하여 커서를 가져오면 Tab 키를 누르면 설정된 Tabindex에 따라 포커스가 전환됩니다.

예를 들어 입력 텍스트 상자에 포커스가 있는 경우 입력 요소를 클릭하고 입력 텍스트 상자에 직접 입력하거나 드롭다운 목록 상자에 포커스가 있는 경우 키보드의 아래쪽 화살표를 누르면 목록을 나열합니다. 또한 프로그램에는 포커스를 얻었을 때 발생하는 이벤트(gotfocus()), 포커스를 잃었을 때 발생하는 이벤트(lostfocus()) 및 컨트롤에 포커스를 설정하는 메서드(setfocus())가 있습니다. 초점을 잘 활용하면 프로그램이 매우 사용자 친화적인 것처럼 보일 수 있습니다.

입력을 클릭하면 jquery가 이벤트를 트리거합니까?

요소가 포커스를 받으면 포커스 이벤트가 발생합니다. 요소는 마우스 클릭으로 선택되거나 탭 키로 배치될 때 포커스를 받습니다.

jquery focus()는 포커스 이벤트를 가져옵니다.

focus() 메서드는 포커스 이벤트를 트리거하거나 포커스 이벤트가 발생할 때 실행할 함수를 지정합니다.

Syntax:

//触发 focus 事件
$(selector).focus()

//将函数绑定到 focus 事件
$(selector).focus(function)
로그인 후 복사

예: 포커스가 있을 때 입력 입력 상자의 테두리 색상을 변경합니다.

샘플 코드:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).focus(function(){
        $(this).css(&#39;border-color&#39;,&#39;red&#39;);
    });
</script>
로그인 후 복사

입력 항목에 마우스를 놓고 클릭하면 입력 요소는 다음과 같은 형태가 됩니다.

입력을 클릭하면 jquery가 이벤트를 트리거합니까?

jq focus() 이벤트는 입력에 CSS 스타일을 추가합니다

<input type="text" name="" id="mochu"   style="max-width:90%">
로그인 후 복사

입력을 클릭하면 jquery가 이벤트를 트리거합니까?

확장 지식: Blur() 메서드는 포커스 손실 이벤트를 설정합니다

blur() 메서드: Blur 이벤트 요소가 포커스를 잃을 때 발생

구문 :

//触发 blur 事件
$(selector).blur()

//将函数绑定到 blur 事件
$(selector).blur(function)
로그인 후 복사

예: 입력이 포커스를 잃은 후 입력 상자의 내용이 팝업됩니다

샘플 코드:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){ 
    alert($(this).val());    
    });
 </script>
로그인 후 복사

실행 결과는 그림과 같습니다:

입력을 클릭하면 jquery가 이벤트를 트리거합니까?

jq Blur() Lost Focus 이벤트를 사용하여 사용자가 입력한 내용을 확인하세요.

JQuery의 Blur() Focus 이벤트를 사용하여 사용자가 입력 상자에 입력한 내용이 합법적인지 확인할 수 있습니다. 예를 들어, 다음 코드는 사용자가 5자 미만을 입력하면 프롬프트를 표시합니다

샘플 코드:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了,多输入几个吧&#39;);
        }
    });
</script>
로그인 후 복사

입력을 클릭하면 jquery가 이벤트를 트리거합니까?

[추천 학습: jQuery 비디오 튜토리얼, 웹 프런트엔드 비디오]

위 내용은 입력을 클릭하면 jquery가 이벤트를 트리거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿