当我以编程方式输入值时，HTML输入元素无法识别值

Question

我有一个Google Chrome扩展程序，该扩展程序可以从一个站点检索数据并将数据粘贴到另一个站点。

要从第一个站点获取数据，请使用以下代码：

$('#copy').click(function() {   
       var newClipboard = {
      "name": $('#buyercontactname').val(),
  }
chrome.runtime.sendMessage({newClipboard: newClipboard});
});

要将数据粘贴到另一个站点中，请使用以下代码：

$(document).ready(function() {
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        if (request.paste) {
            if (!(request.clipboard.name === '')) {
                var nameParts = request.clipboard.name.split(' ');
                $('[id="shippingFirstName"]').val(nameParts[0])
                $('[id="shippingLastName"]').val(nameParts[1]);
            }
          }
        }
    });
});

我替换了有关第二个站点id或div的{​​{1}}值。

问题：

如果我将值粘贴在input上，效果很好，但是如果我将值粘贴在div上，则无法识别，因此需要按一个键。

例如：

粘贴值后：

点击“保存”后（出现错误，字段为空）：

在字段上按一个键（即使我按“空格”）：

input优雅的样子：

input

我该如何解决？

Answer 1

设置输入框的值后，创建并调度输入事件。您可以从此link获取有关输入事件的信息。

document.querySelector('[id="shippingFirstName"]').value=nameParts[0];
document.querySelector('[id="shippingLastName"]').value=nameParts[0];
document.querySelector('[id="shippingFirstName"]').dispatchEvent(new Event("input", { bubbles: true }));
document.querySelector('[id="shippingLastName"]').dispatchEvent(new Event("input", { bubbles: true }));

Answer 2

查看以下问题：val() doesn't trigger change() in jQuery

总而言之，看起来.val()本身可能不会触发文本字段的change事件，但是您可以通过在更改值后运行以下命令来手动触发它：

$('[id="shippingFirstName"]').trigger("change");

如果change()没有触发，您可以尝试更大的事件列表来触发put字段中的更改：

$('[id="shippingFirstName"]').keydown();
$('[id="shippingFirstName"]').keypress();
$('[id="shippingFirstName"]').keyup();
$('[id="shippingFirstName"]').focus();