jQuery Tag-It! - 초점에서 테두리를 변경하는 방법

Question

내 프로젝트에 jQuery Tag-It!을 사용하고 있습니다. onfocus 이벤트가 발생하면 개체의 경계를 표시하고 싶지만 제대로 작동하지 않습니다.

내 코드 :

<ul id="TagsDesc" name="nameOfSelect" runat="server" ></ul> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%=TagsDesc.ClientID %>').focus(function() { 
     $(this).css("border", "1px solid"); 
     }); 

     $('#<%=TagsDesc.ClientID %>').tagit({ 
     'maxTags': 10,'minLength': 1, 
     'maxLength': 12, 
     'tagsChanged': showTags 
     }); 

     function showTags() { 
     var tags = $('#<%=TagsDesc.ClientID %>').tagit("tags"); 
     var tagsContainer = $('#<%=tagsContainer.ClientID %>'); 
     var res = ''; 
     for (var i in tags) 
      res += ',' + tags[i].value; 
     tagsContainer.val(res); 
     } 
    }); 
</script> 

어떤 생각하세요?

Answer 1

포커스 이벤트는 실제로 포커스 가능 요소에만 적용됩니다. (<input>, <select> 등)

ul 또는 li에는 기본적으로 포커스가 설정되지 않습니다.

포커스 이벤트가 포커스를 받으면 요소로 전송됩니다. 이 이벤트 은 양식 (<input>, <select> 등) 및 링크 (<a href>)와 같은 제한된 요소 집합에 암시 적으로 적용됩니다. 최근 브라우저 버전에서는 명시 적으로 요소의 tabindex 속성을 설정하여 모든 요소 유형을 포함하도록 이벤트를 확장 할 수 있습니다. 요소는 Tab 키와 같은 키보드 명령 또는 요소를 마우스로 클릭하여 키를 통해 포커스를 얻을 수 있습니다.

한 가지 해결 방법은 완전히 교차 브라우저 인 경우 확실하지 않게하려는 요소에 tabidex을 사용하는 것입니다. tabindex을 추가하면 대부분의 요소가 keboard로 집중되도록 강제 할 수 있습니다.

CSS 값을 설정하는 경우 jquery를 사용하는 대신 :focus 의사 셀렉터를 사용할 수 있습니다. tagit에 대한

.focusableelement:focus{ 
    border: 1px solid red; 
    } 

구체적인 답 :

클래스 ui-widget-content ui-autocomplete-input과 입력에 focus 이벤트를 적용하고 클래스 tagit ui-widget ui-widget-content ui-corner-all 당신은에 의해 생성 된 입력 필드에 이벤트 핸들러를 첨부해야

Answer 2

와 부모 요소의 경계를 변경 태그 그것. 그것은 DOM 통과하는 번거 로움을 조금하지만이 jQuery를 1.11 및 태그이 2.0 사용하는 나를 위해 일한 :

$("#selector") 
    .tagit({ 
     // whatever you need 
    }) 
    // bind events on tag-it's input field 
    .siblings("ul.tagit") 
    .first() 
    .find("input:first") 
    .on("focus", function() { 
     $(this).closest("ul.tagit").addClass("focus"); 
    }) 
    .on("blur", function() { 
     $(this).closest("ul.tagit").removeClass("focus"); 
    }); 

지금 당신의 스타일에 적절한 CSS 규칙을 추가 :

사이트 라이브입니다

ul.tagit.focus { 
    border: 1px solid; 
}