3

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

我<pre>在 textarea 后面添加了一个突出显示代码的文本区域，该 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/

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

我发现了这个片段：

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

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

尽管文本是透明的，但有没有办法让光标可见？

4

1 回答 1

3

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

仅限 WebKit 的解决方案

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

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

这是一个JSFiddle 示例，我将颜色设置为#f00- 您可以看到红色插入光标，但看不到 textarea 文本。

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

非 WebKit 解决方案

根据您要获得的浏览器支持级别，您始终可以textarea完全放弃并将其设置pre为contenteditable. jQuery 的事件处理程序在应用于元素on('input'...)时仍会触发。pre

<pre contenteditable></pre>

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

JSFiddle 示例。

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

于 2013-05-30T11:52:54.203 回答