CODEWITHSUNDEEP
javascripthtmlsamsung-mobilet9
duncan
duncan

Reputation: 31922

Prevent Samsung predictive text in HTML form

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:

enter image description here

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?

Upvotes: 32

Views: 11419

Answers (8)

Lizard Derad
Lizard Derad

Reputation: 379

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

Upvotes: -1

fedevegili
fedevegili

Reputation: 371

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

Upvotes: 2

Believe2014
Believe2014

Reputation: 3964

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.

Upvotes: 1

Jos&#233; Antonio Postigo
Jos&#233; Antonio Postigo

Reputation: 2974

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>

Upvotes: 1

snezed
snezed

Reputation: 91

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>

Upvotes: 9

Vincent Chan
Vincent Chan

Reputation: 482

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

Upvotes: 1

bbsimonbb
bbsimonbb

Reputation: 29012

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>

Upvotes: 3

Fer To
Fer To

Reputation: 1517

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.

Upvotes: 8

Related Questions