Question

我正在使用AngularJs ng-readonly属性按预期工作但我有一个要求，当用户点击textarea时，用户不希望看到闪烁的光标。是否有任何Angular方法来解决问题？

main.html中

<textarea class="form-control"
    placeholder="Risk Event Type Description" id="riskEventTypeDesc"
    k-data-text-field="'text'"
    ng-model="riskEventObj.riskEventTypeDescription"
    name="RiskEventTypeDesc"  ng-readonly="true">
</textarea>

Answer 1

根据dandavis的评论，您可以为此编写自定义指令：

app.directive("forceReadonly", function() {
  return {
    link: function(scope, element, attr) {
      element.on("focus", function(){
        if(this.readonly) {
          this.blur();
        }
      });

      scope.$on("$destroy", function() {
        element.off("focus");
      })
    }
  };
});

用法：

<textarea class="form-control" placeholder="Risk Event Type Description" id="riskEventTypeDesc" ng-readonly="isReadonly" force-readonly>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>

每当textarea获得焦点时，指令都会检查textarea是否为只读。如果它只读它会立即消除焦点，所以你不会看到闪烁的插入符号。

这样滚动也可以。

示例小提琴here。

但是有一个缺点，这可能会使您无法使用此功能：这会消除在textarea中选择文字的功能，因此无法从textarea进行复制。

Answer 2

我知道以角度来做这件事就是＆＃34;很酷＆＃34;这样做的方式。但CSS也可能让你有能力做到这一点。

如果它有助于展示您可能使用的CSS属性的差异，那么我做了一个JS小提琴。

https://jsfiddle.net/qdmadqLe/

<span style="cursor:inherit">inherit</span><br>

祝你好运！

如何从readOnly字段中删除闪烁的光标？

2 个答案: