3

テキストエリアのさまざまな部分を強調表示する小さな jQuery プラグインを作成しました。

<pre>強調表示されたコードを表示するテキストエリアの後ろに追加しました。テキストエリアは透明です。

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テキストエリア内のテキストの をに変更するとtransparent、カーソルも消えます。これは、Firefox (および他のブラウザー) では常にテキストと同じ色になるためです。

このスニペットを見つけました：

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

しかし、これはマウスカーソルのみを変更し、テキストのどこにいるかを示すものは変更しません。

テキストは透明ですが、カーソルを表示する方法はありますか?

4

1 に答える 1

3

挿入カーソルの色がテキストの色と同じであるため、問題が発生します。

WebKit のみのソリューション

WebKit ブラウザでは、 solid を使用しながら-webkit-text-fill-colorプロパティを使用して設定することで、これを回避できます。transparentcolor

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

色を に設定したJSFiddle の例#f00を次に示します。赤い挿入カーソルが表示されますが、テキストエリアのテキストは表示されません。

残念ながら、これは Firefox やその他の非 WebKit ブラウザーでは機能しません。

WebKit 以外のソリューション

ブラウザのサポートのレベルに応じて、いつでも をtextarea完全に削除して を に設定preできますcontenteditable。jQuery のイベント ハンドラーは、要素on('input'...)に適用されると引き続きトリガーされます。pre

<pre contenteditable></pre>

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

JSFiddle の例。

ただし、これを使用すると、フォーマットを削除する必要がある場合があることに注意してください。

于 2013-05-30T11:52:54.203 に答える