2

我正在使用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>

请问有什么想法吗？

4

2 回答 2

6

焦点事件实际上只适用于可聚焦元素。( <input>, <select>, 等)

ul或者li默认情况下不可聚焦。

当元素获得焦点时，焦点事件被发送到元素。此事件隐式适用于一组有限的元素，例如表单元素（<input>、<select>等）和链接（<a href>）。在最近的浏览器版本中，可以通过显式设置元素的 tabindex 属性来扩展事件以包括所有元素类型。元素可以通过键盘命令（例如 Tab 键）或通过鼠标单击元素获得焦点。

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

要设置 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

于 2012-09-01T09:07:17.330 回答
1

您必须在 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;
}
于 2014-05-23T13:53:26.360 回答