How can I ignore text predictions on mobile in my input?

user_7490140 0
Viewed 102

$("#input").on('input', (e) => {console.log('input')})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search"
        id="input"
        autocomplete="false"
        tabindex="-1"
        autocorrect="off"
        autocapitalize="off"
        spellcheck="false">

I'm trying to turn off text predictions on my input. I'm using this input to autocomplete some data from API. It works fine on desktop but when I'm typing something in this input on my phone it's not working until I focusout the input. I checked this problem and it's pretty common but I can't find a solution... Btw. this input is my custom Vue component but I don't think it's important...The problem is just with this input. I guess the phone is optimazing some api requests and that's the problem. https://gist.github.com/niksumeiko/360164708c3b326bd1c8

How can I turn it off?

google-chrome autocomplete input html
2 Answers

Disabling autocomplete can be done by adding

autocomplete="false"

to the input. However, if you only want to disable it for mobile, then you can do something like this

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    document.getElementById("yourinputid").setAttribute("autocomplete", "false");
}
user_4365600
user_74901400
Related