[NEED HELP] I need to disable the autocorrections and suggestions from keyboard

[ri_scc_94]

Hello guys,

I’m building an app to teach English and for this I need for the keyboard not
to show any suggestions or autocorrect, because this helps the user and then they won’t learn as much…

Is it possible to do it? If it’s needed JavaScript I don’t know anything about language programming…

Thanks for your help…

[ri_scc_94]

Solved!!

To block the Autocorrection, Autocaptalize, etc (except suggestions), what it’s needed to do is to Run a Javascript that will search all inputs visible on screen and change the attribute, with the script:

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
        input.setAttribute('autocomplete', 'off')
	input.setAttribute('autocorrect', 'off')
	input.setAttribute('autocapitalize', 'off')
	input.setAttribute('spellcheck', false)
});  

If you also want to hide the suggestions, the solution I’ve found is to change every input to the password type, so Bubble will block it naturally, and add in the script to change the input for the text again:

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
            input.setAttribute("type","text")
        input.setAttribute('autocomplete', 'off')
	input.setAttribute('autocorrect', 'off')
	input.setAttribute('autocapitalize', 'off')
	input.setAttribute('spellcheck', false)
});  

I hope anyone who has the same problem I had had can solve it now.

PS: The Run Javascript is from a toolbox plugin

[adam10]

Thanks!

[mghatiya]

Didn’t work for me. Wonder what could I be doing wrong.

[ri_scc_94]

Be sure that the input is visible on the page when the javascript is ran.

PS: If you are using a “multiline input”, you have to change the “input” term in the script for “textarea”

Ex:
const textareas= document.querySelectorAll(‘textarea’);

textareas.forEach(textarea => {
input.setAttribute(“type”,“text”)
input.setAttribute(‘autocomplete’, ‘off’)
input.setAttribute(‘autocorrect’, ‘off’)
input.setAttribute(‘autocapitalize’, ‘off’)
input.setAttribute(‘spellcheck’, false)
});

[mghatiya]

I am using a “Searchbox” element. Does that make a difference?

[ri_scc_94]

Searchbox are normal “inputs”
I’ve tested here and it worked normally.

Try to create a workflow “when a condition is true”, with when search box is visible.
Then in this workflow you Run a Javascript, with the text:

const inputs = document.querySelectorAll(‘input’);

inputs.forEach(input => {
input.setAttribute(‘autocomplete’, ‘off’)
input.setAttribute(‘autocorrect’, ‘off’)
input.setAttribute(‘autocapitalize’, ‘off’)
input.setAttribute(‘spellcheck’, false)
});

[mghatiya]

Search box is always visible. There is no conditional on it to hide/show it.

Maybe it could be because I am trying it in PWA?

[mghatiya]

Actually I tried it in regular input itself and it is not working. What am I doing wrong?

[ri_scc_94]

Are you in a Google Chrome browser?

I don’t know why, but google chrome keeps the autocomplete, even after you run the script.

Have you checked through your cell phone if the autocaptalize and autocorrect are still working? If they don’t autocaptalize, the scrip is working.

[mghatiya]

Ah well, Chrome has the highest market share in browsers and by a big margin. I don’t even test in other browsers.

Anyway, thanks for your tip.

[vnihoul77]

Hi

Just in case you’re still looking, we have released a plugin that allows you to determine the auto-completion data type of a specific input or deactivate it

It’s here

[ri_scc_94]

Does it hide the “suggested words”?
I just got it making a input like “password” and than transforming it to text

[vnihoul77]

Sorry I’m not sure what you meant by that

I just got it making a input like “password” and than transforming it to text

[ri_scc_94]

this suggestion, even with autocorrect off, it’s still shown, but in password inputs it isn’t…

[vnihoul77]

Oh, no the plugin isn’t suitable to change the behaviour of this feature unfortunately.

[chris19]

In case you just want to change only one input I found this to work.

Run javascript with this text:

var input = document.getElementById(‘your_input_element_id’);
input.setAttribute(‘autocapitalize’, ‘off’);
input.setAttribute(‘autocomplete’, ‘off’);
input.setAttribute(‘autocorrect’, ‘off’);
input.setAttribute(‘spellcheck’, ‘off’);