>웹 프론트엔드 >JS 튜토리얼 >jQuery를 사용하여 입력 포커스를 감지하고 마우스 아웃 시 테두리 제거를 방지하려면 어떻게 해야 합니까?

jQuery를 사용하여 입력 포커스를 감지하고 마우스 아웃 시 테두리 제거를 방지하려면 어떻게 해야 합니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-29 02:50:10462검색

How Can I Use jQuery to Detect Input Focus and Prevent Border Removal on Mouse Out?

jQuery를 사용하여 입력 포커스 결정 및 테두리 제거 방지

브라우저 간 호환성을 달성하기 위해 jQuery의 .hover를 사용합니다. () CSS의 비에 대한 :hover를 모방하는 메소드 Internet Explorer 6의 요소로 인해 예상치 못한 문제가 발생했습니다. 이러한

중 하나의 입력이 포커스를 받으면 마우스를 놓으면 .hover() 메서드로 생성된 테두리가 사라집니다.

이 문제를 해결하기 위해 우리는 입력에 포커스가 있는지 확인하려고 합니다. 마우스 아웃. jQuery에는 :focus 선택기가 없기 때문에 대체 방법이 필요합니다.

jQuery 1.6 이상

jQuery 1.6에는 :focus 선택기가 포함되어 있어 맞춤 구현이 필요하지 않습니다. $("..").is(":focus")를 사용하면 집중된 입력을 확인할 수 있습니다.

jQuery 1.5 이하

이전 jQuery 버전의 경우, 사용자 정의 :focus 선택기를 정의하는 것이 좋습니다. 이는 다음을 사용하여 달성할 수 있습니다.

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

이렇게 하면 양식 컨트롤과 하이퍼링크만 포커스가 있는 것으로 간주됩니다.

또는 다음을 사용할 수 있습니다.

if ($("...").is(":focus")) { ... }

또는 다음을 사용할 수 있습니다.

$("input:focus").doStuff();

모든 jQuery 버전

jQuery 버전에 관계없이 포커스가 있는 요소를 확인하려면 다음을 사용하세요.

$(document.activeElement)

누락된 :focus 선택기 확인

jQuery 버전이 확실하지 않은 경우 :focus 선택기를 추가할 수 있습니다. 수동으로:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

이러한 기술을 사용하면 브라우저별 제한 사항에 적응하면서 원하는 테두리 동작을 유지할 수 있습니다.

위 내용은 jQuery를 사용하여 입력 포커스를 감지하고 마우스 아웃 시 테두리 제거를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.