How to set focus to the tag-it widget?

Question

I simply want the tag-it widget to have focus after the page loads. I've tried various things like:

<script type="text/javascript">
    $("#myTags").tagit("tagInput").click();
</script>

and

<script type="text/javascript">
    $("#myTags").tagit("tagInput").focus();
</script>

and even more exotic things like use jQuery to modify the ID and call

<script type="text/javascript">
    $("#newIDiTriedToMake").focus();
</script>

Nothing I do seems to ever give keyboard focus to the tag-it widget. I must either tab through my page to it, or click it manually with the mouse to start entering tags. Anyone have clues for me?

Answer 1

I think you're both on-track, that the document hasn't finished building (and therefore the element probably doesn't exist) when I'm trying to set the focus. However, I solved the problem the easy way: editing the source code.

I just added

this.tagInput.attr('autofocus', 'autofocus');

to the _create() method of tag-it, which gives the focus to the element without having to resort to Javascripty goodness. This worked.

Answer 2

I think all you are missing is for the DOM to be built before you set focus. That is if .tagit("tagInput") references a focusable element. You can try:

<script type="text/javascript">
     $(function() {
        $("#myTags").tagit("tagInput").focus();
    });
</script>

Answer 3

You should focus when you have a document.ready:

<script type="text/javascript">
   $(document).ready(function(){
      $("#newIDiTriedToMake").tagit("tagInput").focus();
   })
</script>