使用javascript更改AngularJS输入文本值_JavaScript

我正在尝试在浏览器扩展中运行javascript以自动化在网站上填写表单然后单击按钮的过程 - 可以通过在地址栏中键入javascript：code来模拟扩展代码。

我遇到问题的网站使用angularJS 。 我有输入字段ID的名称，并使用它们来更改输入字段值。 字段填满但是当我点击按钮时它表示它们没有填充，没有值，它们都是错误的。 正在进行一些验证，除非我手动输入值，否则不会“看到”我的更改。

是否有一种简单的方法来更改仅使用输入字段的id进行验证的AngularJS输入字段的值。

这是代码：

<input id="shippingAddr-first-name" type="text" class="first-name ng-pristine ng-valid" maxlength="16" data-ng-model="addressTypes[addressType].FirstName" focus-me="commonAddressTypeProps[addressType].focusOnFirstName" client-validation="onExit" data-required-on-exit="">

我尝试使用document.getElementById("shippingAddr-first-name").value="Dave"; 更改字段但在表单提交期间未正确注册。 但是，如果我手动输入它，它确实有效。 我也尝试过click() ， blur()和focus()来模拟我可能手动做的一些事情，但那些也不起作用。

使用AngularJS可观察的ng-model属性触发元素上的input事件。 事件input是Angular知道发生某些更改并且必须运行$ digest循环的方式

一些源代码：

// if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the
  // input event on backspace, delete or cut
  if ($sniffer.hasEvent('input')) {
    element.on('input', listener);
  } else {
    var timeout;

    var deferListener = function(ev, input, origValue) {
      if (!timeout) {
        timeout = $browser.defer(function() {
          timeout = null;
          if (!input || input.value !== origValue) {
            listener(ev);
          }
        });
      }
    };

    element.on('keydown', function(event) {
      var key = event.keyCode;

      // ignore
      //    command            modifiers                   arrows
      if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;

      deferListener(event, this, this.value);
    });

    // if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it
    if ($sniffer.hasEvent('paste')) {
      element.on('paste cut', deferListener);
    }
  }

一些工作概念证明：

 angular.module('app', []).controller('app', function($scope) { $scope.user = {} $scope.handleSubmit = function(user) { alert('passed name ' + JSON.stringify(user)) } }) $(function() { $('#run').click(function() { fillElement($('[ng-model="user.name"]'), 'some user name') sendForm($('[ng-submit="handleSubmit(user)"]')); }) function fillElement($el, text) { $el.val(text).trigger('input') } function sendForm($form) { $form.submit() } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div> <button id="run">Execute `input` event outside AngularJS</button> </div> <div ng-app="app"> <div ng-controller="app"> <form ng-submit="handleSubmit(user)"> <input type="text" ng-model="user.name" /> <input type="submit" id="submit" value="Submit" /> </form> </div> </div>

您应该使用AngularJS的数据绑定，在输入上放置一个ng-model ，这样您就需要更改该值来获取/设置输入值，您可以在控制器中执行以下操作：

.controller('myCtrl', function ($scope) {
    $scope.addressTypes = [];
    $scope.addressTypes['onetype'] = { FirstName: 'Dave'};
});

使用

angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");

使用javascript更改AngularJS输入文本值

问题描述

1楼

2楼

3楼