Question

我正在使用来自here的Angularjs的packery库。它工作正常，但我发现当我点击它时我无法编辑textarea内容。花了一些时间后，当我右键单击textarea元素时，我能够使其可编辑，但如果我点击它仍然无效。所以现在我在点击textarea时尝试手动触发右键单击事件，这样就可以使元素可编辑。

这是代码

<packery ng-model="files" gutter="12" style="border:0px solid black;width:710px;" >

       <packery-object ng-init="user_text='Write something ...';" class="large text sans-font medium-font box-border-raduis">
             <div class="hidden-overflow sans-font medium-font" style="clear: both; border: 0px solid purple; 
                         background: white; border-top: 6px solid #00a2d3; padding: 10px; "> 
                    <textarea id="Mytextarea" contenteditable="true"  style="margin: 0px;" 

                            ng-click="click();"
                            >{{user_text}}
                     </textarea> 
             </div>
       </packery-object>
</packery>

这是尝试触发oncontextmenu（右键单击）事件的click（）函数：

 $scope.click = function(){
          console.log('clicked!');
          var e = angular.element(document.querySelector('#Mytextarea'));
          console.log(e);
          angular.element(e).triggerHandler("oncontextmenu");

        };

但是这个解决方案似乎没有起作用。我究竟做错了什么？

Answer 1

我肯定会建议找出什么阻止你专注于textarea因为点击它并且聚焦是默认行为，但是，你可以尝试而不是让div包裹textarea使用标签，其中＆＃ 39;对于＆＃39;属性是textarea的id，例如：

<label for="Mytextarea" class="hidden-overflow sans-font medium-font" ...>
        Textarea here
</label>

我通常不接受这个，因为label是一个内联元素，而textarea是一个块元素，但在你的情况下它可能对你有用。

为了跟踪妨碍您关注的内容，我建议您右键点击textarea＆gt;检查元素，然后在Chrome开发工具的元素选项卡上查找“事件监听器”＆＃39;选项卡（应该在窗口的右上角）应该能够看到已绑定到该元素的所有侦听器，并可能帮助您跟踪问题的根源。

在textarea元素Angularjs中触发oncontextmenu事件

1 个答案: