如何從readOnly字段中刪除閃爍的光標？

我使用AngularJs ng-readonly屬性它的工作如預期，但我有一個條件，其中用戶不希望看到閃爍的光標，當用戶單擊textarea。有沒有解決問題的方法？如何從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>

來源

2016-02-18 aftab

使用'ng-disabled' – wero

如果你使用'ng-readonly'，你甚至不應該點擊'textarea'，在這種情況下甚至不可能看到閃爍的光標。 – APAD1

及其在IE瀏覽器發生和如果我使用納克 - 禁用它將限制用戶滾動文本 – aftab

基於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複製。

來源

2016-02-18 20:36:14

我知道這樣它的角度是「酷」的方式來做到這一點。但CSS也可以讓你做到這一點。

我做了一個JS撥弄它是否有助於展示差異CSS屬性，你可能使用。

https://jsfiddle.net/qdmadqLe/

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

祝您好運！

來源

2016-02-18 20:37:41 ChrisBurns

在textarea中，鼠標光標與閃爍的脫字符號相關的方式如何？這兩個經常混在一起。 –

對不起我的男人，我以爲你的意思是當用戶的鼠標懸停在它上面..我的壞。 – ChrisBurns

如何從readOnly字段中刪除閃爍的光標？

回答

相關問題