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:

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?

回答1:

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.

回答2:

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>

回答3:

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>

回答4:

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

回答5:

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>

回答6:

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.

回答7:

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

来源：https://stackoverflow.com/questions/32968624/prevent-samsung-predictive-text-in-html-form

标签

javascript

html

html5

samsung-mobile