Предотвратите интеллектуальный текст Samsung в формате HTML

У меня есть форма HTML с текстовым полем ввода. Поскольку пользователь вводит данные, мы делаем запросы AJAX для получения прогнозирующих текстовых предложений на основе списка значений в нашей базе данных.

Мы показываем этот список, и пользователь может выбрать один из них; то мы покажем им остальную часть формы.

Если вы просматриваете нашу веб-страницу на Samsung Galaxy S4, в ее встроенном браузере или Chrome или Firefox, предложения интеллектуального ввода устройства также отображаются в качестве типов пользователей. например см. скриншот:

введите описание изображения здесь

Это легко для отдельного пользователя, чтобы отключить его в настройках на собственном телефоне. Однако мы хотим сделать так, чтобы он всегда был отключен для этого поля для всех пользователей. Мы уже делаем все, что не мешает ему появиться:

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

Вы также можете увидеть это здесь.

Любые предложения?

Ответы

Ответ 1

Я пробовал разные вещи, и, похоже, на мобильном телефоне у вас нет шансов сделать это правильно.

В соответствии с Safari Developer Docs есть поддержка https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html, но похоже, что это больше связано с Safari рабочего стола, чем с iOS.

Кроме того, проверка орфографии может сделать это, но в настоящее время, согласно http://caniuse.com/#feat=spellcheck-attribute:

Частичная поддержка в мобильных браузерах зависит от их ОС в целом с встроенной проверкой орфографии вместо использования волнистой подчеркивания для укажите слова с ошибками. spellcheck = "false", похоже, не имеет любой эффект в этих браузерах.

Ответ 2

Установка поля в качестве пароля отключает автозаполнение, автокоррект... и все вышеупомянутые действия. После ввода ввода я меняю его на текст. Событие oninput имеет решающее значение для меня.

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

Ответ 3

Установка типа ввода на пароль дает вам поведение, которое вы хотите, но затем вам нужно восстановить и отобразить текст. Следующая тестовая страница приближается, но все еще нуждается в некоторой любви. Скрытие точек приводит к исчезновению курсора. Удачи. Очевидно, проблема заключается в том, что samsung пренебрегает внедрением атрибутов, поэтому вы можете быть прощены за игнорирование этого, я чувствую.

    <!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>

Ответ 5

Я провел некоторое исследование и в текущих браузерах веб-кит, переопределение свойств -webkit-text-security поверх полей input[type="password"] не разрешено.

Итак, на основании ответа user1585345, я сделал улучшенный подход. Это очень хаки, но в некоторых случаях этого было бы достаточно.

Он состоит в создании пароля ввода, где вы печатаете, и текста ввода, за которым изменяются при первом изменении ввода. Вы также можете увидеть, что курсор отображается из-за стилей.

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

Атрибуты HTML5 не будут соблюдаться интеллектуальным текстовым сервисом Samsung.

Я сообщил на форум разработчиков Samsung и запрошу официальное исправление: http://developer.samsung.com/forum/thread/predictive-text-service-not-honoring-auto-correct-attribute/201/315078?boardName=SDK&startId=zzzzz~

Если эта проблема происходит с вами, присоединитесь к усилиям по установлению официального исправления.