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

Question

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

它不能工作，有什么想法吗？

提前感谢您。

- rimba

---

控制台有任何错误吗？ - 31piy

不，控制台在焦点上没有显示任何内容。 - rimba

Answer 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 进行检查，但这是不建议的做法。

$("#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">

- A. Wolff