房匠網 FUN JIANG

      今天設計嵐來分享一個技巧，這個技巧實用性相當高，尤其是對於和設計嵐一樣在經營部落格，時常分享語法教學文章時，可以用到，而且也有許多人問過設計嵐相關的問題，這裡利用本文一次回答吧！

1.首先，在文章中置入文字框的作法：

a.將游標放在文章中要插入文字框的地方，然後切換至HTML編輯器模式(由於各家blog的發表文章介面有所不同，大家可以根據同樣原則進行操作，在此設計嵐以Pixnet說明)

上圖1：游標放置在適當處

上圖2：點選上方工具列的『編輯HTML原始程式碼』按鈕

b.在編輯畫面中輸入以下程式碼或是將以下程式碼複製、貼上後，再進行修改。

<textarea cols="50" rows="3"> </textarea>  

‧在上方框內點一下已全選原始碼

‧CTRL+C進行複製的動作(由於許多部落格都有鎖定無法按右鍵，所以複製動作請用鍵盤快速鍵)

‧在HTML原始碼編輯模式下貼上至適當處

c.貼上之後可以進行以下設定：

i.上方原始碼中的cols代表字元寬度，表示文字框的一列要顯示幾個字元，各位可依需求設定，數值越大文字框就越寬。

ii.上方原始碼中的rows代表要顯示幾列文字，各位可以自行設定，例如3代表顯示3列，超過3列以外的內容就以捲軸方式顯示。

d.貼上並且修改參數完成後請點選畫面左下角的『更新』回到文章編輯畫面，就可以看到文字框了。(如下圖)

e.接著在文字框上連點兩下左鍵，就可以輸入文字框的內容。

到這邊，各位就學會了在部落格文章中加入文字框的方法。

2.接著說明如何製作游標點一下就自動選取文字框內所有內容的作法：

a.複製以下的原始碼：

onfocus="this.select()"

‧在上方框內點一下以全選原始碼

‧CTRL+C進行複製的動作(由於許多部落格都有鎖定無法按右鍵，所以複製動作請用鍵盤快速鍵)

‧在HTML原始碼編輯模式下將原始碼貼在<textarea>的<>中即可

b.同上述作法切換到HTML原始碼編輯模式中

c.將上述原始碼貼至<textarea cols="50" rows="3" 原始碼貼在這這裡 >，記得是貼在<>中

d.完成後點選左下角『更新』回到文章編輯畫面

      以上兩個重點，就是如何在文章內置入文字框以及點一下就可以全選文字框內容的作法，對於時常分享程式碼相關文章的部落格站長應該相當實用，不妨參考一下。