阿瑟 發表
利用傳統的textarea輸入方塊來取得使用者輸入還必須經過後台script做HTML的轉換才能夠正常顯示, 這次介紹的Richtext輸入方塊就是一個很方便的另一個選擇.
相信大家都對 <textarea></textarea> 產生的多行文字輸入方塊都不陌生, 他們看起來十分的陽春:
那要如何增加輸入的選擇呢?
有些人選擇開放檔案上傳, 有些人則開放輸入HTML標籤...小弟這次要介紹一種有效且容易上手的輸入方塊: Richtext 輸入方塊
<iframe width="400" height="150" id="test"> </iframe> <script language="Javascript"> <!-- test.document.designMode = "on"; --> </script> |
<iframe width="400" height="150" id="test2">
</iframe>
<script language="Javascript">
<!--
test2.document.designMode = "on";
function showHTML()
{
alert(test2.document.body.innerHTML);
}
-->
</script><br>
<form><input type="button" value="取得輸入值" onClick="showHTML();"></form>
|
<form>
<input type="button" value="設定為粗體" onClick="setBold();"><br>
<iframe width="400" height="150" id="test3">
</iframe>
<script language="Javascript">
<!--
test3.document.designMode = "on";
function showHTML2()
{
alert(test3.document.body.innerHTML);
}
function setBold()
{
test3.focus();
Sel = test3.document.selection.createRange();
Sel.type = test3.document.selection.type;
Sel.pasteHTML(" <b>" + Sel.text + "</b> ");
}
-->
</script><br>
<input type="button" value="取得輸入值" onClick="showHTML2();"></form>
|
| test3.focus(); |
| Sel = test3.document.selection.createRange(); |
| Sel.pasteHTML(" <b>" + Sel.text + "</b> "); |
這個輸入方塊雖然方便 (會自動處理好HTML), 但是實際上他存在很多的問題, 如使用"上一頁"功能的時候, 之前的輸入值就會全部被洗掉...這些問題都是需要自己再去寫script來加強的. 另外就是...這個輸入方便需要較新版本的瀏覽器, 因此如果您考慮使用的話, 記得要準備一份純文字版的輸入方塊給瀏覽器版本較舊的人使用.
小弟在貼出這篇教學的同時應該已經增加了Richtext編輯器到酷必網的文章系統...如果您對於這種輸入方塊有興趣的話, 不妨參考看看酷必網的文章系統.
最後要感謝一下tek兄協助蒐集相關的教學資料