Javascript 如何从只读字段中删除闪烁光标?

Javascript 如何从只读字段中删除闪烁光标?,javascript,html,angularjs,Javascript,Html,Angularjs,我正在使用AngularJsng readonly属性,其工作方式与预期一致,但我有一个要求,即当用户单击文本区域时,用户不希望看到光标闪烁。有没有办法解决这个问题 main.html <textarea class="form-control" placeholder="Risk Event Type Description" id="riskEventTypeDesc" k-data-text-field="'text'" ng-model="riskEvent

我正在使用AngularJs
ng readonly
属性,其工作方式与预期一致,但我有一个要求,即当用户单击
文本区域时,用户不希望看到光标闪烁。有没有办法解决这个问题

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>

根据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
是否为只读。如果它是只读的,它会立即移除焦点,因此您不会看到闪烁的插入符号

这样滚动也可以工作

例如小提琴


不过有一个缺点,这可能会使您无法使用:这会使您无法在
textarea
中选择文本,因此无法从
textarea
中进行复制我知道以角度进行复制是一种“酷”的方式。但是CSS也可以让你做到这一点

我做了一个JS提琴,如果它有助于演示您可能使用的CSS属性的差异

继承

祝你好运

如果您使用的是
ng readonly
,您甚至不能在
文本区域中单击,在这种情况下,甚至不可能看到闪烁的光标。它发生在IE浏览器中,如果我使用ng disabled,它将限制用户滚动文本
,而使用
pre
?如果需要支持IE,您将遇到更多问题。首先,IE9和更低版本不支持占位符文本,因此,除非您使用polyfill或其他解决方法,否则您的文本区域将在浏览器中显示为空。鼠标光标与文本区域中闪烁的插入符号有何关系?这两个经常混淆。对不起,伙计,我以为你是指当用户的鼠标悬停在上面时。。我的错。
<span style="cursor:inherit">inherit</span><br>