Question

我写了一个小的jQuery插件来突出显示textarea中的不同部分。

我在textarea后面添加了一个<pre>，它显示了突出显示的代码，textarea是透明的：

HTML：

<textarea class="edit" rows="10"></textarea>

CSS：

pre {
    position: absolute;
    z-index: -1;

    outline: 1px dashed red;
}

.edit {
    outline: 1px dotted blue;
    opacity: 1;
    width: 50%;

    color: #000;
    border: 0px solid transparent;
    background: transparent;

    resize: vertical;
}

pre, .edit {
    overflow: auto;
    margin: 0;
    padding: 0;

    tab-size: 4;
    -o-tab-size: 4;
    -moz-tab-size: 4;

    line-height: 17px;
    font-family: monospace; 
    font-size: 13px;
}

JS：

$(document).ready(function() {
    $('.edit').after('<pre></pre>');

    var $code = $('pre');
    var position = $('.edit').position();

    $code.css('left', position.left + 'px');
    $code.css('top', position.top + 'px');
    $code.css('width', $('.edit').innerWidth() + 'px');
    $code.css('height', $('.edit').innerHeight() + 'px');

    $('.edit').on('input', function() {
         $('pre').html($(this).val());   
    });
});

以下是预览：http://jsfiddle.net/Recode/HaPAe/

如果我将textarea中文本的color更改为transparent，则光标也会消失，因为在Firefox（以及其他一些浏览器）中，它始终与文本颜色相同。 / p>

我找到了这个片段：

.edit { cursor: url(cursor.cur), default; }

但这只会改变鼠标光标，而不会改变我在文本中的位置。

虽然文字是透明的，但有没有办法获得可见的光标？

Answer 1

您遇到的问题是因为插入光标的颜色与文本的颜色相同。

仅限WebKit的解决方案

在WebKit浏览器中，您可以使用-webkit-text-fill-color属性并将其设置为transparent，同时仍然使用实体color来解决此问题：

.edit {
    color:#000;
    -webkit-text-fill-color:transparent;
}

这是JSFiddle example，我将颜色设置为#f00 - 您可以看到红色插入光标，但无法看到textarea文本。

不幸的是，这不适用于Firefox或其他非WebKit浏览器。

非WebKit解决方案

根据您的浏览器支持级别，您可以随时完全删除textarea并将pre设置为contenteditable。当应用于on('input'...)元素时，jQuery的pre事件处理程序仍会触发。

<pre contenteditable></pre>

$('pre').on('input', function() { ... });

JSFiddle example

请注意，尽管如此，您可能需要去除格式化。

光标在透明文本区域

1 个答案:

仅限WebKit的解决方案

非WebKit解决方案