Search code examples
javascriptjquerytag-it

Jquery Tag-it - How to do an action on focus

Im using the Jquery plug-in Tag-it and I want to do an action when the input is on focus.

I tried:

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

And it doesnt work, any ideas?

thank you in advance

Solution

  • If you inspect rendered HTML, you'll see it is not the original input which is focused. Now you could bind event to relevant element:

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

    Be aware that this plugin trigger focus on custom plugin element, so you have to filter it to avoid double handler call. As a side note, you could use e.isTrigger as a check, but it is 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">