Prevent Samsung predictive text in HTML form

Question

I have an HTML form with a text input field. As the user types, we do AJAX requests to get predictive text suggestions, based on a list of values in our database.

We display that list and the user can select one of them; then we show them the rest of the form.

If you're viewing our web page on a Samsung Galaxy S4, in its built-in browser or Chrome or Firefox, the device's predictive input suggestions also appear as the user types. e.g. see the screenshot:

It's easy enough for an individual user to disable this in the settings on their own phone. However we want to make it so it's always disabled for this field for all users. We're already doing all the following, which don't seem to prevent it appearing:

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

You can also see this here.

Any suggestions?

I think it's only possible for password fields, not sure tho. — Rudie Visser, Oct 06 '15 at 11:24
They should be synonymous, but [the documentation](http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#the-autocomplete-attribute) says it's `off` — duncan, Oct 09 '15 at 09:50
You can't disable it. I had the same problem on iOS. It used to work with `autocomplete="off" autocorrect="off"` but not anymore with the new ios and android versions. — Jonas, Oct 09 '15 at 11:51
it's not possible, sry. Looks like mobile browser are not allowing this any longer. — Fer To, Oct 09 '15 at 12:53
keep in mind there are different keyboards the user could install that might bypass or follow anything, too. So even when you find a solution to this, you cannot make sure it works on all cases. — Martin Braun, Oct 09 '15 at 14:14

score 8 · Accepted Answer · answered Oct 09 '15 at 12:53

I've tried different things and it seems that on mobile you currently have no chance to do this in a proper way.

According to Safari Developer Docs there is support https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html but it seems that this is more related to the Desktop Safari than iOS.

Additionally, spellcheck could do it but currently, according to http://caniuse.com/#feat=spellcheck-attribute :

The partial support in mobile browsers results from their OS generally having built-in spell checking instead of using the wavy underline to indicate misspelled words. spellcheck="false" does not seem to have any effect in these browsers.

I think I'll have to accept "it can't be done" as the answer, thanks! — duncan, Oct 16 '15 at 09:12
@duncan I know it's not satisfying but sometimes there is no "real" trick. I guess with a native App this could be "possible", e.g. on Android you could create your own functions, listeners to a WebView, but this is obviously not an "easy" HTML tag — Fer To, Oct 16 '15 at 10:27

score 8 · Answer 2 · edited Oct 18 '16 at 15:29

8

Setting the field as password disables autocomplete, autocorrect... and all the above mentioned behaviors. After entering the input i change it back to text. The oninput event was crucial for me.

 <input id="myinput" oninput="changeInputType(this)" type="password"/>
 <script>
     function changeInputType(input) {
       input.type = 'text';
    }
 </script>

edited Oct 18 '16 at 15:29

baudsp

4,076
1
17
35

answered Oct 18 '16 at 14:34

snezed

81
1
2

This worked for me. I used the `onfocus` event instead of `oninput` event, seems cleaner. – Norman Breau Nov 10 '16 at 23:50
Do you think if there is a similar way for contenteditable div? – Jun Jun 26 '17 at 20:42
It is not working samsung galaxy tab A android 6.0 version device. – Swift Oct 31 '17 at 06:35

score 3 · Answer 3 · answered Oct 14 '15 at 15:33

Setting the input type to password gets you the behaviour you want, but then you have to recover and display the text. The following test page is getting close, but still needs some love. Hiding the dots makes the cursor disappear. Good luck. The problem is clearly samsung neglecting to implement the attributes, so you could be forgiven for ignoring this one, I feel.

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            input[type="password"] {
                cursor : url(cursor.png),auto;
                color : rgba(0,0,0,0);
            }
        </style>

    </head>
    <body>
        <form>
            <input type="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="under" /><br />
            <div id="over" style="position:absolute; left:10px; top:10px"></div>
        </form>
        <script>
            function textChanged(event) {
                document.getElementById('over').innerHTML = document.getElementById('under').value;
            }       
            document.getElementById('under').addEventListener('keyup', textChanged);
        </script>
    </body>
    </html>

I don't think that this is in the interest of mobile OS providers (Apple, Google). Additionally, I've tested your code and on iOS9 Safari it is not working, so ... — Fer To, Oct 15 '15 at 08:37

score 2 · Answer 4 · answered May 18 '18 at 17:09

2

For numeric inputs, type="tel" solves the issue

answered May 18 '18 at 17:09

fedevegili

341
3
5

what if you need decimals? – DevReacc Oct 05 '22 at 20:37

score 1 · Answer 5 · edited May 23 '17 at 12:16

1

I can't test this because I don't have a samsung phone, but have you tried the name="password" trick?

Turning off auto-complete for textarea and inputfields in Android Cordova-app

edited May 23 '17 at 12:16

Community

1
1

answered Oct 16 '15 at 02:17

Vincent Chan

484
1
4
12

Nice idea! I tried it on a Samsung (S6 this time, but I think it'd be the same on S4 and S5), but unfortunately it didn't work. – duncan Oct 16 '15 at 09:10

score 1 · Answer 6 · answered Feb 23 '17 at 09:35

I've done some research and in current webkit browsers, redefining the -webkit-text-security property over input[type="password"] fields isn't allowed.

So, based on user1585345 answer, I've done an improved approach. It's very hacky, but it would be enought in some cases.

It consist on creating an input password, where you type, and an input text behind which changes when the first input changes. You can also see the cursor is being showed due the styles.

var textInput = document.querySelector('.unpredictable-input input[type="text"]');
var passwordInput = document.querySelector('.unpredictable-input input[type="password"]');

passwordInput.addEventListener('input', function() {

    textInput.value = passwordInput.value;

    if(navigator.userAgent.match(/Android/)) {
        passwordInput.style.letterSpacing =
        (2.6 + passwordInput.value.length * 0.05) + 'px';
    }

}, false);

.unpredictable-input {
    position: relative;
    width: 150px;
}

.unpredictable-input input {
    position: absolute;
    width: 100%;
}

.unpredictable-input input[type="text"] {
    font-family: monospace;
}

.unpredictable-input input[type="password"] {
    color: black;
    user-select: none;
    -webkit-text-fill-color: transparent;
    background: transparent;
    letter-spacing: 2.5px;
    padding: 3px;
    border: 0;
}

<div class="unpredictable-input">
    <input type="text" />
    <input type="password" />
</div>

score 1 · Answer 7 · answered Jul 27 '17 at 13:25

The HTML5 attributes won't be respected by Samsung predictive text service.

I have reported to Samsung Developers forum and request an official fix: http://developer.samsung.com/forum/thread/predictive-text-service-not-honoring-auto-correct-attribute/201/315078?boardName=SDK&startId=zzzzz~

If this issue is happening to you, please join the effort to push for an official fix.

score -1 · Answer 8 · answered May 19 '20 at 08:17

in vuejs I have computed property

inputType(){
   if(this.inputTypeState){
      return 'text'
   }
   return 'password'
}

in data() I have

this.inputTypeState = false

in template I have

<input
   :type="inputType"
   @input="inputTypeState = true"
>

And it works, just you don't have samsungs autocomplete, if you want web and samsung autocomplete maybe try having casual input=text then transfer value to different input I defined above, then first input will be responsible for build in autocomplete and second - for website autocomplete.

booking.com has solved it's interesting what approach did they use

Prevent Samsung predictive text in HTML form

8 Answers8

Linked