建立 我們首先來建立一個擁有三個按鈕的簡單工具條:一個粗體按鈕,一個斜體按鈕,一個連線按鍵。該工具列是向一個現有的文本域添加功能的好方法,它可以讓使用者在無需瞭解HTML的情況下對輸入的文本進行簡單的控制。任何讓使用者參與或進行反饋的網站都可以利用這一工具列進行加強。
我們的工具列在功能上可以分為下面4個部分:
·封裝選定文本附件HTML標記的JavaScript函數
·定製工具列、按鈕的外觀和風格的樣式表
·響應滑鼠事件的JavaScript函數
·包含工具列代碼、映像、表格元素的HTML
我們首先來研究一下二個處理向<textarea>插入HTML代碼的函數:
利用JavaScript處理文本集
function format_sel(v) {
var str = document.selection.createRange().text;
document.my_form.my_textarea.focus();
var sel = document.selection.createRange();
sel.text = "<" + v + ">" + str + "<" + v + ">";
return;
}
format_sel()只接受一個參數,即表示作用於選定文本的HTML標記的字串。在這個工具列中,我們用這個函數來控制<b>和<i>之間的文本。當然,如果願意,我們可以使用<strong>和<em>替換<b>和<i>,或者使用這個函數控制一段選定的文本,或者在選擇的標記中限定指定文本。
我們可以使用selection對象的createRange()方法方便地建立當前文本的TextRange對象。通過訪問其text屬性,我們可以得到<textarea>中選定的文本。text屬性將被賦給一個局部變數。在下一行中,我們對<textarea>調用了focus(),這一行代碼非常重要,否則,我們對文本的改變可能會被寫到網頁的其他部分去。最後,我們建立了指定文本的另一個引用,並賦給它一個新值:即位於適當的HTML標記中的原來的selection的地址。