用自动完成值填充隐藏字段

Populate hidden field with autocomplete value

本文关键字：填充 隐藏 字段      更新时间：2023-09-26

我有一个HTML表单，有一个常规文本输入和一个隐藏字段。

我还有下面的代码，将用文本字段的值填充隐藏字段，或者当它被更改时，或者如果文本字段有默认值(由页面本身提供):

$(document).ready(function() {
  var emailinput = document.getElementById('emailval');
  document.getElementById('usernameval').value = emailinput.value;
  emailinput.onkeyup = function() {
    document.getElementById('usernameval').value = emailinput.value;
  }
  emailinput.onblur = function() {
    document.getElementById('usernameval').value = emailinput.value;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="email" id="emailval" />
<input type="hidden" name="username" id="usernameval" />

除了浏览器自动填充文本字段的情况外，这工作得很好。如果用户提交表单而不更改文本字段。

所以我的问题是，有没有办法让javascript从浏览器自动填充的文本字段拉值?

在表单的提交事件上附加一个事件处理程序，并将#emailval的值复制到#usernameval。例如，表单的ID是#form:

$('#form').submit(function (event) {
  'use strict';
  $('#usernameval').val($('#emailval').val());
});

文档:https://api.jquery.com/submit/

什么是'input7'?我假设这是一把钥匙。当鼠标离开输入框时，您可以添加另一个事件来获取该值，因为用户必须使用鼠标来选择该值。

你可能要考虑的另一件事是，在该字段关闭自动完成。https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

您可以使用表单的onsubmit事件。下面是伪代码:- 

form.onsubmit= function(e){
  e.preventDefault();
  document.getElementById('usernameval').value = document.getElementById('emailval').value;
  this.submit();
}
相关文章：