Подтвердить что ты не робот

Выделите текст при вводе текста

Я пытаюсь создать текстовое поле, которое будет выделять некоторые ключевые слова в качестве типов пользователей. Я понимаю, что textarea поддерживает только простой текст и что для этого я должен использовать редактор "богатого текста". Мне бы хотелось что-то действительно простое, хотя и не раздутые "богатые редакторы". Есть идеи?

Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

Вот фрагмент, который дает вам основы того, что ищет:

<style>
    .textarea { font-family:arial; font-size:12px; border:0; width:700px; height:200px; }
    .realTextarea { margin:0; background:transparent; position: absolute; z-index:999; }
    .overlayTextarea { margin:0; position:absolute; top:1; left:1; z-index:998; }
    .textareaBorder { border:groove 1px #ccc; position:relative; width:702px; height:202px; }
    .highlight { background: yellow; }
</style>

<script>
    var _terms = ['January', 'February', 'March']; // YOUR SEARCH TERMS GO HERE //

    function preg_quote( str ) {
        return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
    }

    function doit() {
        var s = myTextarea.value;

        for (i=0; i<_terms.length; i++)
            s = s.replace( new RegExp( preg_quote( _terms[i] ), 'gi' ), '<span class="highlight">' + _terms[i] + '</span>' );

        myOtherTextarea.innerHTML = s.replace( new RegExp( preg_quote( '\r' ), 'gi' ), '<br>' );
    }
</script>

<div class="textarea textareaBorder">
    <textarea id="myTextarea" onkeyup="doit();" class="textarea realTextarea"></textarea>
    <div id="myOtherTextarea" class="textarea overlayTextarea"></div>
</div>

Основная идея состоит в том, что <textarea> (сверху) прозрачен, а под <div> находится "богатая/освещенная" версия. Есть возможность для улучшения, когда дело доходит до обертывания текста, но вы получаете эту идею. Счастливое выделение!

Кредит: Функция preg_quote принадлежит Кевину ван Зонневельду  http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_preg_quote/