Question

我有一个带有常规文本输入和隐藏字段的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从浏览器自动填充的文本字段中提取值？

Answer 1

在表单的submit事件上附加事件处理程序，并将#emailval的值复制到#usernameval。例如，假设您的表单具有ID，＃form：

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

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

Answer 2

什么是＆＃39;输入7＆＃39;？我认为这是关键。您可以在鼠标离开输入框时添加另一个事件来获取该值，因为用户必须使用鼠标来选择值。

您可能要考虑的另一件事是关闭该字段的自动填充功能。 https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Answer 3

您可以使用表单的onsubmit事件。这是伪代码： -

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

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

3 个答案: