javascript - password - Autocompletar desencadenador sin enviar un formulario
form autocomplete off (9)
Estoy escribiendo una aplicación web muy simple con tres entradas de texto. Las entradas se utilizan para generar un resultado, pero todo el trabajo se realiza en Javascript, por lo que no es necesario enviar un formulario. Estoy intentando encontrar una forma de que el navegador almacene los valores de entrada para la autocompletar como lo haría si estuvieran en un formulario que se envió.
He intentado dar manualmente las entradas autocompletar = "on", pero sin un formulario para enviar, el navegador no tiene manera de saber cuándo debe almacenar los valores, por lo que esto no tiene ningún efecto.
También he intentado envolver las entradas en una forma que tiene onSubmit = "return false;" pero evitar que el formulario se presente realmente parece impedir que el navegador almacene los valores de sus entradas.
Por supuesto, es posible usar localStorage manualmente o una cookie para persistir en las entradas y luego generar sugerencias de autocompletar, pero espero encontrar una solución que aproveche el comportamiento del navegador nativo en lugar de duplicarlo manualmente.
Asegúrese de enviar el formulario a través de POST. Si está enviando a través de ajax, haga <form autocomplete="on" method="post"> , omitiendo el atributo de action .
No he probado esto, pero podría funcionar si envía el formulario a un iframe oculto (para que el formulario se envíe realmente pero la página actual no se vuelva a cargar).
<iframe name="my_iframe" src="about:blank"></iframe>
<form target="my_iframe" action="about:blank" method="get">...</form>
Para aquellos que prefieren no cambiar su funcionalidad de formulario existente, puede usar un segundo formulario para recibir copias de todos los valores de formulario y luego enviarlo a una página en blanco antes de que se envíe el formulario principal. Aquí hay un documento HTML totalmente comprobable que utiliza JQuery Mobile y que demuestra la solución.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form method="post">
<input type="text" name="email" />
<input type="submit" value="GO" onclick="save_autofill(this);" />
</form>
<script>
function save_autofill(o) {
$('':input[name]'', $(''#hidden_form'')).val(function () {
return $('':input[name='' + this.name + '']'', $(o.form)).val();
});
$(''#hidden_form'').find("input[type=submit]").click();
}
</script>
<iframe name="hidden_iframe" style="display:none"></iframe>
<form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none">
<input type="text" name="email" />
<input type="submit" />
</form>
</body>
</html>
La función save_autofill solo necesita ser llamada en su botón de envío de formulario principal. Si tiene una función con guión que envía su formulario, realice esa llamada después de la llamada save_autofill . Debe tener un cuadro de texto con nombre en su hidden_form para cada uno en su formulario principal.
Si su sitio usa SSL, debe cambiar la URL por about:blank con https://about:blank .
Por lo que busqué ... parece que necesitas identificar los nombres. Algunos nombres estándar como "nombre", "correo electrónico", "teléfono", "dirección" se guardan automáticamente en la mayoría de los navegadores.
Bueno, el problema es que los navegadores manejan estos nombres diferentemente. Por ejemplo, aquí está la expresión regular de Chrome:
- primer nombre: "primero. * nombre | iniciales | fname | primer $"
- correo electrónico: "e.?mail"
- dirección (línea 1): "dirección. * línea | dirección1 | addr1 | calle"
- código postal: "zip | postal | post. * código | pcode | ^ 1z $"
Pero Chrome también usa x-autocompletetype , por lo que puedes personalizar el nombre y poner un tipo de autocompletar, pero creo que esto no es para campos personalizados.
Aquí está el experimento de cromo
Y es otra cosa en IE, Opera y Mozilla. Por ahora, puedes probar la solución iframe allí, para que puedas enviarla. (Tal vez es algo semi-estándar)
Bueno, eso es todo lo que puedo ayudar.
Probado con Chrome, IE y Firefox:
<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe>
<form target="remember" method="post" action="/content/blank">
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="">
</fieldset>
<button type="submit" class="hidden"></button>
</form>
En su Javascript desencadenar el envío, por ejemplo $("form").submit(); $("#submit_button").click() (actualizado de los comentarios)
Debe devolver una página vacía en / content / blank para get & post (about: blank no funcionó para mí, pero sí para YMMV).
Puede usar jQuery para persistir en los datos de autocompletar en el almacenamiento local cuando se enfoca y cuando se enfoca se completa automáticamente al valor persistido.
es decir
$(function(){
$(''#txtElement'').on(''focusout'',function(){
$(this).data(''fldName'',$(this).val());
}
$(''#txtElement'').on(''focusin'',function(){
$(this).val($(this).data(''fldName''));
}
}
También puede enlazar la lógica de persistencia en otros eventos también dependiendo de los requisitos de su aplicación.
Sabemos que el navegador guarda su información solo cuando se envía el formulario , lo que significa que no podemos cancelarlo con return false o e.preventDefault()
Lo que podemos hacer es hacer que envíe los datos a ninguna parte sin volver a cargar una página. Podemos hacer eso con un iframe
<iframe name="💾" style="display:none" src="about:blank"></iframe>
<form target="💾" action="about:blank">
<input name="user">
<input name="password" type="password">
<input value="Login" type="submit">
</form>
Demostración en JSfiddle (probado en IE9, Firefox, Chrome)
Pros sobre la respuesta actualmente aceptada:
- código más corto;
- no jQuery;
- ninguna página del lado del servidor cargada;
- sin javascript adicional;
- no hay clases adicionales necesarias.
No hay javascript adicional Normalmente, adjuntas un controlador al evento de submit del formulario para enviar el XHR y no lo cancelas.
Ejemplo de Javascript
// for modern browsers with window.fetch
document.forms[0].addEventListener(''submit'', function (event) {
fetch(''login.php'', {
method: ''post'',
body: new FormData(event.target))
}).then(r => r.text()).then(() => { /* login completed */ })
// no return false!!
});
Soporte sin javascript
Idealmente, debe dejar que el formulario funcione sin javascript también, por lo tanto, elimine el target y establezca la acción en una página que recibirá los datos del formulario.
<form action="login.php">
Y luego simplemente agréguelo a través de javascript cuando agrega el evento de submit :
formElement.target = ''💾'';
formElement.action = ''about:blank'';
Tal vez puedas usar este Twitter Typeahead ... es una implementación muy completa de una autocompletar, con captación previa local y remota, y esto hace uso de localStorage para persistir en los resultados y también muestra una pista en el elemento de entrada ... el código es fácil de entender y si no quiere usar el complemento jquery completo, creo que puede echar un vistazo al código para ver cómo lograr lo que quiere ...
puedes usar "." en iframe src y form action.
<iframe id="remember" name="remember" style="display:none;" src="."></iframe>
<form target="remember" method="post" action=".">
<input type="text" id="path" size=''110''>
<button type="submit" onclick="doyouthing();">your button</button>
</form>