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

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

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

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

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

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

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

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>

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

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

<input type="text" name="" id="mochu" style="border-color: red;">

확장 지식: 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>

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

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가 이벤트를 트리거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!