表单中文本输入框的浏览器记忆功能相关问题
表单中文本输入框的浏览器记忆功能相关问题
嘿,我来帮你梳理下这个关于浏览器记住表单输入的问题!
你现在有这么一个自定义表单,搭配了calc处理函数:这个函数会拦截表单的默认提交行为,把输入框_A和_B的内容拼接后显示在只读框_R里,最后还会让_A重新获得焦点。你的核心需求是让浏览器能记住_A字段的输入内容,所以已经给它加上了name="_A"、required以及autocomplete="on"这些属性,对吧?
先给你肯定下,你目前加的这些属性都是对的:
- name属性是核心:浏览器的自动记忆功能基本都是靠
name来识别字段的,光有id可不行,这步你做对了; required属性能强化字段的“必填”标识,让浏览器更清楚这是需要用户填写的关键字段,有助于触发记忆逻辑;autocomplete="on"也没问题,虽然多数浏览器默认就是开启自动填充的,但手动加上能避免意外情况。
不过这里有个特殊点要注意:你用event.preventDefault()完全阻止了表单的默认提交行为,有些浏览器会因为表单没有实际发起提交请求,就跳过了字段记忆的触发逻辑。给你几个实用的小技巧试试:
- 给_A的
autocomplete属性设成更具体的语义化值,比如autocomplete="username"(如果是用户名场景)或者autocomplete="given-name",浏览器对这类明确的类型识别度更高,更容易触发记忆; - 检查下浏览器的站点权限设置,确保没有禁用当前网站的自动填充功能——有时候浏览器的个性化设置会覆盖页面上的属性配置;
- 要是上面的方法都不行,可以试试在处理完计算后,短暂地允许表单提交然后立即取消?不过这个方法有点hack,不太推荐,优先试试前面的。
附上你提供的完整代码,方便对照:
<form id="_F"> <input id="_A" name="_A" required type="text" autocomplete="on" autofocus/> <input id="_B" required type="text" autocomplete="off"/> <input id="_C" type="submit" value="Calc"/> <input id="_R" type="text" readonly="true"/> </form> <script> // form processing _F.addEventListener("submit", calc); function calc(event) { // do not send data event.preventDefault(); // perform calculation _R.value = _A.value + _B.value; _A.focus(); } </script>
备注:内容来源于stack exchange,提问作者Patatetom




