当我以编程方式输入值时，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或 的值input。

问题：

如果我粘贴该值，div效果很好，但是如果我粘贴该值，则input无法识别，我需要按一个键才能识别。

例如：

粘贴值后：

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

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

元素input看起来像这样：

<input ng-model="user.first_name" id="shippingFirstName" name="shippingFirstName" prefix-attrs-with="shipping" value="" pattern="(?!^\d+$)^.+$" autocapitalize="off" autocomplete="off" maxlength="100" xo-error-tooltip="" ng-required="true" data-test-id="user.first_name" class="ng-pristine ng-empty ng-valid-pattern ng-invalid ng-invalid-required ng-valid-maxlength hasErrorTooltipRequired ng-touched focused" required="required" aria-describedby="nbafrxk" aria-invalid="true">

我该如何解决？

Answer 1

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

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 }));