如何不通过 JQuery 在只读文本区域中显示闪烁的文本光标？答案

【问题标题】：How not to display blinking text cursor, in read only, textarea through JQuery?如何不通过 JQuery 在只读文本区域中显示闪烁的文本光标？
【发布时间】：2015-05-27 10:46:00
【问题描述】：

在事件中，texarea 设置为只读。但是当用户点击它时，它会在 textarea 中显示文本光标闪烁。

<textarea readonly="readonly"></textarea>

小提琴：https://jsfiddle.net/foeyo7qc/

要求： textarea 应该是只读的（不是禁用的）；但单击它时，文本光标不应闪烁显示。

有没有办法通过jQuery做到这一点？

更新：

浏览器：IE-10+ Mozilla 最新 Chrome 最新版

【问题讨论】：

在什么浏览器中，我的 Chrome 根本不显示光标？
Hide textfield blinking cursor的可能重复
stackoverflow.com/questions/7917592/…
喜欢jsfiddle.net/foeyo7qc/2 ?
必须是textarea吗？也许你可以用 div 替换它，只要它是只读的。

标签： javascript jquery html css

【解决方案1】：

尝试将此添加到您的 <textarea> 标记或类中：

textarea{
    ...
    color : transparent;
}

这应该会伪造你想要的效果。

编辑

如果您需要插入一些文本，则无用。

【讨论】：

它还会使文本区域中的任何文本不可见

【解决方案2】：

尝试将font-size设置为0，您现在必须为<textarea> 设置height 和width

textarea{
    width:200px;
    height:100px;
    font-size : 0;
}

【讨论】：

【解决方案3】：

跟随 sn-p 帮助我解决了它：

$('textarea').on('mouseover', function (e) {
        $(this).is('[readonly]') ? $(this).addClass("cursorNotAllowed") : $(this).removeClass("cursorNotAllowed");
    });

    $('textarea').focus(function(){
        $(this).is('[readonly]') ? this.blur() : "";
    });

【讨论】：