ExtJS 6 TextArea readOnly：如何将鼠标光标限制在 textarea 内答案

【问题标题】：ExtJS 6 TextArea readOnly : how to restrict mouse cursor inside textareaExtJS 6 TextArea readOnly：如何将鼠标光标限制在 textarea 内
【发布时间】：2017-06-29 08:42:59
【问题描述】：

我有一个带有绑定变量 readOnly 的 ExtJS6 文本区域

bind:{
readOnly : '{someCondition}'
}

当 textarea 具有 readOnly:true 时，单击文本字段鼠标光标位于文本区域内。当文本区域为只读时，我想限制鼠标光标。

使用“禁用”属性可以正常工作，并且不允许鼠标光标在文本区域内，但不显示带有文本区域的垂直滚动条。因此不能使用这个属性。

能否请您提出一些解决方案。

【问题讨论】：

对于只读TextArea，鼠标光标不应显示在textarea内。
只读你的意思是你不能编辑但光标在文本字段中看到？如果可能的话，你能展示一些演示/图片吗？
当该字段为只读时，我不希望鼠标光标位于文本区域内。我使用了 this.blur() 但这没有帮助。

标签： extjs cursor textarea mouse readonly

【解决方案1】：

你必须指定editable config

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

fiddle.

【讨论】：

editable 也不起作用。鼠标光标仍在文字里面。我使用了 this.blur() 但这不起作用。
它正在工作，请参考小提琴。 fiddle.sencha.com/#view/editor&fiddle/22c0
有数据时不显示滚动条。代码是 { xtype: 'textareafield', maxLength: 100, grow: true, growMin:10, growMax:90, , bind: { value: '(json data)', readOnly:'{ some condition}' }, allowBlank ：真}
我使用了下面的代码，但这不起作用： listeners: {focus: function(field) {this.blur}}
因为你已经指定了grow 和growMax 属性，删除它，滚动条就会出现。请参考同一个小提琴。

【解决方案2】：

@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（使用复选框将文本区域设为只读）。

【讨论】：