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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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");
}

CodePudding user response：

After a lot of debuging I found an answer... All this time, it was the problem with Vue. The solution is explained here: Vue v-model input change mobile chrome not work