Jquery Tag-it - 如何在焦点上执行操作答案

【问题标题】：Jquery Tag-it - How to do an action on focusJquery Tag-it - 如何在焦点上执行操作
【发布时间】：2016-12-12 13:45:36
【问题描述】：

我正在使用 Jquery 插件 Tag-it，我想在输入焦点时执行操作。

我试过了：

$('#tags').tagit().focus(function() {
  // do something...
});

$('#tags').focus(function() {
  // do something...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/js/tag-it.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/tagit.ui-zendesk.min.css" rel="stylesheet"/>

<input id="tags" name="tags" type="text" class="form-control" autocomplete="off">

它不起作用，有什么想法吗？

提前谢谢你

【问题讨论】：

控制台有错误吗？
不，控制台没有显示任何焦点

标签： javascript jquery tag-it

【解决方案1】：

如果您检查呈现的 HTML，您会发现它不是聚焦的原始输入。现在您可以将事件绑定到相关元素：

$('#tags').tagit().next('ul').find('li input.ui-widget-content').focus(function(e) {
  if (!e.originalEvent) return;
  // code your logic here
  console.log('focus');
});

请注意，此插件触发器专注于自定义插件元素，因此您必须对其进行过滤以避免双重处理程序调用。作为旁注，您可以使用e.isTrigger 作为检查，但它是not recommanded。

$("#tags").tagit().next('ul').find('li input.ui-widget-content').focus(function(e) {
  if (!e.originalEvent) return;
  // code your logic here
  console.log('focus');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/js/tag-it.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/tagit.ui-zendesk.min.css" rel="stylesheet" />

<input id="tags" name="tags" type="text" class="form-control" autocomplete="off">

【讨论】：