Предотвратить Samsung предиктивный текст в виде HTML
У меня есть HTML-форма с полем ввода текста. По мере того, как пользователь вводит, мы выполняем AJAX-запросы, чтобы получить прогнозные текстовые предложения на основе списка значений в нашей базе данных.
Мы отображаем этот список, и пользователь может выбрать один из них; тогда мы покажем им остальную часть формы.
Если вы просматриваете нашу веб-страницу на Samsung Galaxy S4 во встроенном браузере или Chrome или Firefox, подсказки устройства для интеллектуального ввода также отображаются в виде пользовательских типов. например, смотрите скриншот:
Отдельному пользователю достаточно просто отключить это в настройках своего телефона. Однако мы хотим, чтобы это поле было отключено для всех пользователей. Мы уже выполняем все следующие действия, которые, похоже, не препятствуют его появлению:
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
Вы также можете увидеть это здесь.
Какие-либо предложения?
7 ответов
Я пробовал разные вещи, и кажется, что на мобильном у вас нет шансов сделать это должным образом.
В соответствии с документами Safari Developer есть поддержка https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html но, похоже, это больше относится к Desktop Safari, чем к iOS.
Кроме того, проверка орфографии могла бы сделать это, но в настоящее время, согласно http://caniuse.com/:
Частичная поддержка в мобильных браузерах является следствием того, что их ОС обычно имеет встроенную проверку орфографии вместо использования волнистого подчеркивания для обозначения слов с ошибками. spellcheck="false", похоже, не имеет никакого эффекта в этих браузерах.
Установка поля в качестве пароля отключает автозаполнение, автозамену... и все вышеупомянутые поведения. После ввода ввода я изменяю его обратно на текст. Событие oninput было крайне важным для меня.
<input id="myinput" oninput="changeInputType(this)" type="password"/>
<script>
function changeInputType(input) {
input.type = 'text';
}
</script>
Установка типа ввода для пароля дает вам поведение, которое вы хотите, но затем вам нужно восстановить и отобразить текст. Следующая тестовая страница приближается, но все еще нуждается в любви. Скрытие точек заставляет курсор исчезнуть. Удачи. Ясно, что проблема в том, что самсунг пренебрегает реализацией атрибутов, так что вы можете быть прощены за игнорирование этого, я чувствую.
<!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>
Я не могу проверить это, потому что у меня нет телефона Samsung, но вы пробовали трюк name="password"?
Отключение автозаполнения текстовой области и полей ввода в Android-приложении Cordova
Я провел некоторое исследование и в текущих браузерах WebKit, переопределяя -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>Атрибуты HTML5 не будут учитываться сервисом прогнозирования текста Samsung.
Я сообщил об этом на форуме разработчиков Samsung и запросил официальное исправление: http://developer.samsung.com/forum/thread/predictive-text-service-not-honoring-auto-correct-attribute/201/315078?boardName=SDK&startId=zzzzz~
Если эта проблема происходит с вами, пожалуйста, приложите усилия, чтобы добиться официального исправления.
В vuejs я вычислил свойство
inputType(){
if(this.inputTypeState){
return 'text'
}
return 'password'
}
в data() у меня есть
this.inputTypeState = false
в шаблоне у меня есть
<input
:type="inputType"
@input="inputTypeState = true"
>
И это работает, просто у вас нет автозаполнения samsung, если вы хотите автозаполнение веб и самсунг, возможно, попробуйте использовать случайный ввод = текст, а затем передать значение на другой ввод, который я определил выше, тогда первый ввод будет отвечать за сборку автозаполнения, а второй - для автозаполнения сайта.
booking.com решил, что интересно, какой подход они использовали