2012-09-16 257 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