2017-06-29 81 views
0

鼠標光標我已可變readOnly的ExtJS的6的TextArea readOnly的:如何限制內的textarea

bind:{ 
readOnly : '{someCondition}' 
} 

結合當textarea的具有readOnly的一個ExtJS6 textarea的:真,則在文本字段的點擊鼠標光標位於內文本區域。我想在文本區域只讀時限制鼠標光標。

使用「禁用」屬性工作正常,不允許鼠標光標在文本區域內,但不顯示帶文本區域的垂直滾動條。因此不能使用這個屬性。

請問您能否提出一些解決方案。

+0

for readOnly TextArea鼠標光標不應顯示在textarea中。 – sorab

+0

通過只讀你的意思是你不能編輯但是在文本框中看到光標嗎?如果可能,你可以展示一些演示/圖像? – Tejas

+0

當該字段是隻讀的,那麼我不希望textarea內的鼠標光標。我使用this.blur(),但沒有幫助。 – sorab

回答

0

你必須指定editable配置

bind:{ 
    readOnly : '{someCondition}' 
    editable : false({somecondition}) 
} 

fiddle

+0

可編輯也不起作用。鼠標光標仍然在文本里面。我使用this.blur()但那不起作用。 – sorab

+0

它工作請參閱小提琴。 https://fiddle.sencha.com/#view/editor&fiddle/22c0 –

+0

如果有數據,它不會顯示滾動條。的代碼爲{ 的xtype: 'textareafield', 最大長度:100, 成長:真, growMin:10, growMax:90, , 綁定:{ 值: '(JSON數據)', readOnly的: '{一些條件}' }, allowBlank:真 } – sorab

0

@Ronak Patel提供的這個answer的小提琴似乎工作。如果您還想阻止用戶使用鼠標選擇文本區域中的文本,則可以將user-select設置爲none。儘管這不是標準做法,但您也可以更改光標以向用戶指示他們無法選擇文本。 這些變化可以在writeableChange事件偵聽器進行:

writeableChange: function() { 
         if (this.readOnly) { 
          this.inputEl.dom.style.userSelect = 'none'; 
          this.inputEl.dom.style.cursor = 'not-allowed'; 
         } else { 
          this.inputEl.dom.style.userSelect = 'inherit'; 
          this.inputEl.dom.style.cursor = 'inherit'; 
         } 
        } 

見更新小提琴here(使用複選框使textarea的只讀或者沒有)。