1

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

justyna
  • 21
  • 6

2 Answers2

0

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");
}
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • It's still not working... – justyna Nov 07 '21 at 12:48
  • @justyna can you edit your question with a minimal reproducible example, preferably in a snippet? – Lajos Arpad Nov 07 '21 at 12:49
  • Ok, I edited it. I simplified it a bit, but that's the main idea - to run some js code after every input – justyna Nov 07 '21 at 13:00
  • @justyna you are doing `autocomplete="off"` while it should be `autocomplete="false"` – Lajos Arpad Nov 07 '21 at 13:01
  • Sorry, it's edited now. But.. I checked this snippet on my phone and it's working - I can see that it's printing 'input'. But when I did this same thing in my project it's still not making any api requests, or at least it's not displaying the list of results...any idea why? – justyna Nov 07 '21 at 13:07
  • If I type the word I'm looking for I have to focusout or enter a space – justyna Nov 07 '21 at 13:09
  • Moreover if I change the default keyboard on my phone (Gboard it's my default keyboard) to some other custom one, it works fine. I have Android phone – justyna Nov 07 '21 at 13:11
  • @justyna I think this is the solution to your actual question, we have achieved a breakthrough. The problem is that you have another issue down the line. If we separate the issue from your project, then it is easy to be resolved. If not, then you still have issues. This means that something in the project breaks this solution. I would test by gradually removing resources from the project for the purpose of an experiment until the behavior changes. When that happens, the culprit is found. – Lajos Arpad Nov 07 '21 at 13:37
0

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

justyna
  • 21
  • 6
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 07 '21 at 19:48