2012-09-16 261 views
1

当代码在一个textarea我想,代码后,任何文字的字体颜色键入像^ 1改为无论颜色^ 1被分配到,改变颜色

截至目前我有以下:

<form method="post" action="index.php"> 
<textarea id="text" onkeypressed="changecolor()"></textarea> 
<input type="submit" value="Add"> 
</form> 

的javascript:

function changecolor() { //code here } 

所以基本上当i型^ 1和蓝色被分配给该代码,该代码后的文本将在c olor blue,但是当输入第二个代码时;例如^ 2之后的文本将是分配给该代码的颜色,我很清楚如何将数据插入到数据库中,但我需要找到一种获取原始数据的方式;即原始数据以^ 1和^ 2的形式输入到textarea中。

帮助真的很感谢!

回答

0

你不能在文本区域中定位文本的特定片段。除非您监控其内容并添加抽象div层以从中输出样式化的html,否则您想做的事情无法完成。 许多所见即所得文本编辑器像这样做,或者使用“CONTENTEDITABLE”属性以允许在现代浏览器的HTML编辑... 你可以这样开始:

<script type="text/javascript"> 
    var display, input, displayHtml; 
    function init(){ 
     display = document.getElementById('display'); 
     input = document.getElementById('input'); 
    } 
    function onContentChange(){ 
     displayHtml = parseContent(this.value); 
     display.innerHtml = displayHtml; 
    } 
    function parseContent(text){ 
     var html = ... // Generate html according to content 
     return html; 
    } 
    document.onload=init; 
</script> 

HTML:

<textarea id='input' onkeypress="javascript:onContentChange" /> 
<div id='display'></div> 
+0

好Wysiwyg编辑如何做到这一点? – Ryan

+0

正如我所说的,他们使用textarea来允许用户输入,但隐藏它并在其位置添加div元素。他们订阅textarea的“更改”事件以相应地永久更新div的内容。每次键入内容时,都会在主div内的span,p,h1,h2标签内进行解析和渲染。你可以使用跨度和div来实现你想要的。 –

+0

可以请给我一个简单的例子,说明如何实现这一点,非常感谢! – Ryan