javascript - 当我以编程方式输入值时，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]);
            }
          }
        }
    });
});

我替换了关于第二个站点 div 或 input 的 id 值。

问题:

如果我将值粘贴到 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

在设置输入框的值后创建并发送一个输入事件。您可以从这个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 }));