使用 javascript 更改 AngularJS 输入文本值 [英] Change AngularJS input text value using 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 循环的方式

一些源代码:

//如果浏览器确实支持输入"事件，我们就没问题——除了 IE9 不触发//退格、删除或剪切的输入事件if ($sniffer.hasEvent('input')) {element.on('输入', 监听器);} 别的 {变量超时；var deferListener = function(ev, input, origValue) {如果(！超时){超时 = $browser.defer(function() {超时=空；if (!input || input.value !== origValue) {听众(ev)；}});}};element.on('keydown', function(event) {var key = event.keyCode;//忽略//命令修饰符箭头if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;deferListener(event, this, this.value);});//如果用户在 IE 中使用上下文菜单修改输入值，我们需要粘贴"和剪切"事件来捕获它if ($sniffer.hasEvent('paste')) {element.on('粘贴剪切', deferListener);}}

一些有效的概念证明:

angular.module('app', []).controller('app', function($scope) {$scope.user = {}$scope.handleSubmit = 函数(用户){警报('传递名称' + JSON.stringify(用户))}})$(函数(){$('#run').click(function() {fillElement($('[ng-model="user.name"]'), '一些用户名')sendForm($('[ng-submit="handleSubmit(user)"]'));})函数填充元素($el，文本){$el.val(text).trigger('输入')}函数 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">在AngularJS之外执行`input`事件</button>

<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"/></表单>

I'm trying to run javascript in a browser extension to automate a process of filling in a form on a website and then clicking a button -- the extension code can be simulated by typing javascript:code into the address bar.

The website that I'm having problems with uses angularJS. I have the names of the input field ids and am using those to change the input field values. The fields fill up but when I click the button it says they are not filled, there are no values and they are all in error. Some validation is going on that does not "see" my changes unless I type in the values manually.

Is there a simple way to change the value of the AngularJS input fields that have validation using just the id of the input field.

Here is the code:

<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="">

My attempts using document.getElementById("shippingAddr-first-name").value="Dave"; change the field but do not register correctly during the form submission. It does work however if I type it in manually. I've also tried click(), blur(), and focus(), to simulate some things I might be doing manually but those do not work either.

解决方案

Trigger input event on element with ng-model attribute that is observable by AngularJS. Event input is the way from where Angular knows that some changes occurs and it must run $digest loop

Some source code:

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

Some working proof of concept:

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>

这篇关于使用 javascript 更改 AngularJS 输入文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！