利用javascript建立功能強大的GUI(2)

來源:互聯網
上載者:User
建立   我們首先來建立一個擁有三個按鈕的簡單工具條:一個粗體按鈕,一個斜體按鈕,一個連線按鍵。該工具列是向一個現有的文本域添加功能的好方法,它可以讓使用者在無需瞭解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的地址。



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.