aehlke / tag-it

A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.
http://aehlke.github.com/tag-it/
MIT License
2.48k stars 826 forks source link

Tagit currently doesn't support mobile devices. #209

Open vikasgulati opened 11 years ago

vikasgulati commented 11 years ago

I am unable to use tagit on mobile devices. The tag can be deleted but cannot add a new tag.

vikasgulati commented 11 years ago

Apparently it was a bug on chrome in android. Strangely keycode or which property of event keydown is returned 0 for any key on chrome in android. There is a bug open for the same, but hasn't yet been resolved.

Anyhow tagit should gracefully handle it till the bug is resolved. The tag should get properly formed on blur from the text input.

Also if we copy paste a text in and then on blur after that the tags should be formed as per the delimiters set. I guess if this gets handled we could handle the above scenario as well gracefully!

nanse commented 7 years ago
//android --> get space, comma keycode 
<script>
    var getKeyCode = function (str) {
        return str.charCodeAt(str.length - 1);
    }

    $('#formTagSearch').on('keyup', '#searchTag > li.tagit-new > input[type=text]', function(e){

        //for android chrome keycode fix
        if (navigator.userAgent.match(/Android/i)) {

            var tag = this.value;

            var kCd = e.keyCode || e.which;
            if (kCd == 0 || kCd == 229) { 
                kCd = getKeyCode(tag);
            }

            if(kCd == 32 || kCd == 44) {
                $(this).val(tag.substring(0, tag.length - 1));
                $("#searchTag").tagit("createTag", tag);
            }
        }       
    });
</script>
tbrannt commented 6 years ago

If someone is interested, this fixed it for me:

$(document).ready(function() {
    $('input#tagit-input').on("textInput", function(e) {
        if(e.originalEvent.data.charCodeAt(0) == 32) {
            $('input#tagit-input').tagit('createTag', $('input#tagit-input .tagit-new input').val());
        }
    });
});