blocks|key|16455|text|使用angular.element|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|16456|angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");|code-block|syntax|javascript|16457|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/function/angular.element^0|2|F|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>use <a href="https://docs.angularjs.org/api/ng/function/angular.element" rel="nofollow">angular.element</a></p>

<pre><code>angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");
</code></pre>


blocks|key|2487190|text|您应该使用AngularJS的数据绑定，您在输入上放置了一个ng-model，因此您需要更改该值以获取/设置输入值，在您的控制器中，您可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2487191|JSFiddle|2487192|.controller('myCtrl',+function+($scope)+{
++++$scope.addressTypes+=+[];
++++$scope.addressTypes['onetype']+=+{+FirstName:+'Dave'};
});|code-block|syntax|javascript|2487193|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/michelem09/5watbma9/^0|U|8|0|0|8|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You should use the data binding of AngularJS, you put an <code>ng-model</code> on the input so you need to change that value to get/set the input value, in you controller you can do:</p>

<p><a href="http://jsfiddle.net/michelem09/5watbma9/" rel="nofollow">JSFiddle</a></p>

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


blocks|key|1521790|text|在具有ng-+input属性的元素上触发AngularJS可观察到的模型事件。事件input是Angular知道某些变化发生的地方，它必须运行$digest循环|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1521791|一些源代码：|BOLD|1521792|//+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+%7C%7C+input.value+!==+origValue)+{
++++++++++++listener(ev);
++++++++++}
++++++++});
++++++}
++++};

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

++++++//+ignore
++++++//++++command++++++++++++modifiers+++++++++++++++++++arrows
++++++if+(key+===+91+%7C%7C+(15+<+key+&&+key+<+19)+%7C%7C+(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);
++++}
++}|code-block|syntax|javascript|1521793|一些有效的概念证明：|1521794|angular.module('app',+[]).controller('app',+function($scope)+{
++$scope.user+=+{}
++$scope.handleSubmit+=+function(user)+{
++++alert('passed+name+'+%2B+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()
++}
})|1521795|<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>|1521796|​|1521797|entityMap^0|7|5|15|5|0|0|6|0|0|0|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|15|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|K|7|1A|8|@]|D|@]|E|$L|M]]|$1|T|3|U|5|6|7|1B|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|W|$]]

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

<p><strong>Some source code:</strong></p>

<pre><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 &lt; key &amp;&amp; key &lt; 19) || (37 &lt;= key &amp;&amp; key &lt;= 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);
    }
  }
</code></pre>

<p><strong>Some working proof of concept:</strong>
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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()
  }
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;

&lt;div&gt;
  &lt;button id="run"&gt;Execute `input` event outside AngularJS&lt;/button&gt;
&lt;/div&gt;
&lt;div ng-app="app"&gt;
  &lt;div ng-controller="app"&gt;
    &lt;form ng-submit="handleSubmit(user)"&gt;
      &lt;input type="text" ng-model="user.name" /&gt;
      &lt;input type="submit" id="submit" value="Submit" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>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.</p>

<p>The website that I'm having problems with uses <code>angularJS</code>. 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.</p>

<p>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.</p>

<p>Here is the code:</p>

<pre><code>&lt;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=""&gt;
</code></pre>

<p>My attempts using
<code>document.getElementById("shippingAddr-first-name").value="Dave";</code> 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 <code>click()</code>, <code>blur()</code>, and <code>focus()</code>, to simulate some things I might be doing manually but those do not work either.</p>


Change AngularJS input text value using javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试在浏览器扩展中运行javascript，以自动执行在网站上填写表单然后单击按钮的过程--扩展代码可以通过在地址栏中键入javascript:code来模拟。我遇到问题的网站使用的是angularJS。我有输入字段I的名称，并使用它们来更改输入字段的值。字段已填充，但当我单击按钮时，它显示它们未填充，没有值，并...

问使用javascript更改AngularJS输入文本值
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript更改AngularJS输入文本值EN