我正在尝试创建一个textarea,它将突出显示用户键入的一些关键字。我理解textarea只能支持纯文本,并且我必须使用“富文本”编辑器才能实现此目的。我想要一些非常简单的东西,而不是那些臃肿的'富有编辑'。有任何想法吗?当你在textarea上键入时突出显示文本
谢谢!
我正在尝试创建一个textarea,它将突出显示用户键入的一些关键字。我理解textarea只能支持纯文本,并且我必须使用“富文本”编辑器才能实现此目的。我想要一些非常简单的东西,而不是那些臃肿的'富有编辑'。有任何想法吗?当你在textarea上键入时突出显示文本
谢谢!
这里是一个片段,让你什么都在寻找知识:
<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功能是由凯文·范Zonneveld http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_preg_quote/
太好了!这似乎是所有StackOverflow中的唯一答案,它实际上告诉你CodeMirror(和其他编辑器喜欢它!)的工作方式! :) – 2010-11-09 22:52:02
你的意思是,你输入的东西,它试图猜你在找什么? – Henryz 2010-08-04 09:02:37