tagit的具体答案：

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属性来显示类型。一个 element可以通过键盘命令获得焦点，例如Tab键，或通过鼠标点击元素。

一种解决方法是在要使其成为焦点的元素上使用tabidex，不确定它是否完全跨浏览器。添加tabindex会使大多数元素都可以聚焦，因为它会强制通过键盘进行聚焦。

要设置css值，您可以使用:focus伪选择器而不是使用jquery。

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

tagit的具体答案：

对类focus的输入应用ui-widget-content ui-autocomplete-input事件，并使用类tagit ui-widget ui-widget-content ui-corner-all更改父元素的边框

Answer 2

您必须在tag-it创建的输入字段上附加事件处理程序。它有点像DOM遍历麻烦，但这对我来说使用jQuery 1.11和tag-it 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;
}

jQuery Tag-It！ - 如何更改焦点边框

2 个答案:

tagit的具体答案：