我正在尝试用jquery创建一个彩色的textarea。它工作得很好但是当我按下回车键然后它没有改变颜色。 这是我的代码。
<html>
<script type="text/javascript" src="jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">
//<![CDATA[
//declearing of array of collored words
var style = [];
var words = ['function','var','editableText'];
style['function'] = 'color:#772AC3;';
style['var'] = 'color:red;';
style['editableText'] = 'color:#2A00FF;';
//function for coloring words
function ColorDiv(words,color,id)
{
for (var index = 0; index < words.length; ++index) {
$("#"+id+":contains("+words[index]+")").each(function () {
$(this).html($(this).html().replace(words[index], "<span class='red' style='"+color[words[index]]+"'>"+words[index]+"</span>"));
});
}
}
//start up functions definations
$(window).load(function(){
ColorDiv(words,color,'fool');
});//]]>
</script>
<textarea id="fool_txt"></textarea>
<div id="fool"></div>
<script>
$( "#fool_txt" )
.keyup(function() {
var value = $( this ).val();
$( "#fool" ).text( value );
ColorDiv(words,style,'fool');
})
.keyup();
</script>
我不知道如何解决这个问题。
答案 0 :(得分:1)
我修改了你的逻辑。您可以查看this fiddle
var style = [];
var words = ['function', 'var', 'editableText'];
style['function'] = 'color:#772AC3;';
style['var'] = 'color:red;';
style['editableText'] = 'color:#2A00FF;';
//function for coloring words
function ColorDiv(words, color, arr, id) {
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].replace(/[\n\r]/g,"<br/>");
var matchedIndex = words.indexOf(arr[i]);
if (matchedIndex !== -1) {
arr[i] = "<span class='red' style='" + color[words[matchedIndex]] + "'>" + arr[i] + "</span>";
}
}
$("#" + id).html(arr.join(" "));
}
//start up functions definations
$(window).load(function () {//TODO: modify this to document ready and below fn param
ColorDiv(words, color, 'fool');
});
$("#fool_txt")
.keyup(function () {//TODO: can be optimized by selective invoking ColorDiv
var value = $(this).val();
ColorDiv(words, style, value.split(new RegExp("\\b")), 'fool');
})
答案 1 :(得分:0)
最初调用ColorDiv函数时使用未定义的变量 color :
ColorDiv(words,color,'fool');
这是否应该是 style 在另一个函数调用中传递?
我创造了一个小提琴,我相信你想要它做http://jsfiddle.net/ux3yph9j/ 在小提琴中,我将所有的JS移动到一个单独的文件中,以保持不引人注目。
代码只对我使用$(document).ready()而不是$(window).load()。我认为这就像是小提琴一样。