Я пытаюсь создать текстовую область, которая выделит некоторые ключевые слова как пользовательские типы там. Я understant текстовая область может только поддерживать простой текст и что я должен использовать редактора 'обогащенного текста' для достижения этого. Я хотел бы что-то действительно простое хотя а не чрезмерно увеличенные в размерах 'богатые редакторы' там. Какие-либо идеи?
Спасибо!
Вот фрагмент, который дает вам основную информацию о том, что вы ищете:
<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>
Основная идея заключается в том, что Кредит:
Функция preg_quote взята от Кевина ван Зонневельда.
http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_preg_quote/
(вверху) является прозрачным, а