Prevent Samsung predictive text in HTML form

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


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>

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'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.

Tags:

Javascript

Html

Samsung Mobile

T9

Recent Posts