javascript - samsung - texto predictivo whatsapp
Prevenir texto predictivo de Samsung en forma HTML (7)
Tengo un formulario HTML con un campo de entrada de texto. A medida que el usuario escribe, hacemos solicitudes AJAX para obtener sugerencias de texto predictivo, basadas en una lista de valores en nuestra base de datos.
Mostramos esa lista y el usuario puede seleccionar una de ellas; Luego les mostramos el resto del formulario.
Si está viendo nuestra página web en un Samsung Galaxy S4, en su navegador integrado o en Chrome o Firefox, las sugerencias de entrada predictiva del dispositivo también aparecen como tipos de usuarios. Por ejemplo, ver la captura de pantalla:
Es bastante fácil para un usuario individual deshabilitar esto en la configuración de su propio teléfono. Sin embargo, queremos hacerlo para que siempre esté deshabilitado para este campo para todos los usuarios. Ya estamos haciendo todo lo siguiente, que no parece evitar que aparezca:
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
También puedes ver esto aquí .
¿Alguna sugerencia?
Al establecer el tipo de entrada en contraseña se obtiene el comportamiento que desea, pero luego debe recuperar y mostrar el texto. La siguiente página de prueba se está acercando, pero aún necesita algo de amor. Al ocultar los puntos desaparece el cursor. Buena suerte. El problema es claramente que Samsung descuida la implementación de los atributos, por lo que podría ser perdonado por ignorar este, me parece.
<!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>
Establecer el campo como contraseña desactiva autocompletar, autocorrección ... y todos los comportamientos mencionados anteriormente. Después de ingresar la entrada, la cambio de nuevo a texto. El evento de entrada fue crucial para mí.
<input id="myinput" oninput="changeInputType(this)" type="password"/>
<script>
function changeInputType(input) {
input.type = ''text'';
}
</script>
He intentado cosas diferentes y parece que en el móvil actualmente no tienes oportunidad de hacer esto de manera adecuada.
Según Safari Developer Docs, hay soporte https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html pero parece que esto está más relacionado con Desktop Safari que con iOS.
Además, SpellCheck podría hacerlo pero actualmente, de acuerdo con http://caniuse.com/#feat=spellcheck-attribute :
El soporte parcial en los navegadores móviles se debe a que su sistema operativo generalmente tiene una revisión ortográfica integrada en lugar de usar el subrayado ondulado para indicar palabras mal escritas. spellcheck = "false" no parece tener ningún efecto en estos navegadores.
He investigado y en los navegadores webkit actuales, no se -webkit-text-security redefinir la -webkit-text-security sobre input[type="password"] campos de input[type="password"] .
Entonces, basado en la respuesta del usuario 1585345, he hecho un enfoque mejorado. Es muy intrincado, pero sería suficiente en algunos casos.
Consiste en crear una contraseña de entrada, donde escribe, y un texto de entrada detrás del cual cambia cuando cambia la primera entrada. También puede ver que el cursor se muestra debido a los estilos.
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>
Los atributos HTML5 no serán respetados por el servicio de texto predictivo de Samsung.
He informado al foro de desarrolladores de Samsung y solicito una solución oficial: http://developer.samsung.com/forum/thread/predictive-text-service-not-honoring-auto-correct-attribute/201/315078?boardName=SDK&startId=zzzzz~
Si este problema le está sucediendo, por favor, únase al esfuerzo de presionar por una solución oficial.
No puedo probar esto porque no tengo un teléfono samsung, pero ¿has probado el truco de name = "password"?
Desactivación de autocompletar para textarea y campos de entrada en la aplicación Cordova de Android
Para entradas numéricas, escriba = "tel" resuelve el problema