Элемент ввода 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 }));

Answer 2

Проверьте этот вопрос: val () не вызывает изменения () в jQuery

В итоге, похоже, что .val() само по себе может не вызывать событие изменения текстового поля, но вы можете запустить его вручную, выполнив его после изменения значения:

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

Если change() не вызывает его, вы можете попробовать больший список событий, чтобы вызвать изменение в поле пут:

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