Jquery에서 포커스 이벤트를 얻고 잃는 방법

jquery에서는 focus() 메서드를 사용하여 "$(selector).focus()" 구문을 사용할 수 있습니다. Blur() 메서드를 사용하여 포커스 이벤트를 잃을 수 있습니다. 구문 "$ (선택기).blur()".

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

프런트 엔드 웹 사이트에 사용자가 콘텐츠를 채울 수 있는 일부 양식 요소가 있는 경우 JQ의 포커스 이벤트 및 포커스 손실 이벤트를 사용하여 사용자에게 몇 가지 프롬프트를 제공할 수 있습니다. 오늘은 JQuery에서 포커스 획득 및 포커스 상실 이벤트를 사용하는 방법에 대해 이야기하겠습니다.

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

focus() 메서드: 마우스를 클릭하여 요소를 선택하거나 탭 키로 위치를 지정하면 해당 요소가 포커스를 받습니다.

구문: ​​

$(selector).focus()

Copy

예: 입력 입력 상자에 초점이 맞춰지면 테두리 색상이 변경됩니다.

샘플 코드:

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

Copy

마우스가 입력으로 이동하여 클릭하면 입력이 요소는 다음과 같습니다.

jq focus() 이벤트 형식은 CSS 스타일을 입력

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

Copy

jquery에 추가합니다. 요소가 포커스를 잃습니다

구문:

$(selector).blur()

Copy

예: 입력이 포커스를 잃으면 입력 상자의 내용이 나타납니다.

샘플 코드:

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

Copy

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

jq Blur()를 사용하여 포커스 이벤트를 잃습니다. 사용자가 입력한 내용을 확인합니다.

JQuery의 Blur() 손실 이벤트를 사용하여 사용자가 입력 상자에 입력한 내용이 적법한지 확인할 수 있습니다. 예를 들어 사용자가 입력한 내용이 5자 미만인 경우 다음 코드가 제공됩니다. Tip

샘플 코드:

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

추천 관련 튜토리얼:

jQuery 비디오 튜토리얼

위 내용은 Jquery에서 포커스 이벤트를 얻고 잃는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!