文本域textarea

 

文本域

CreateTime--2017年5月23日15:12:08
Author:Marydon

2、文本域

　　（一）語法

　　　　<textarea></textarea>

　　（二）用法介紹

　　　　2.2.1 頁面展現

　　　　內容必定要寫在標籤體內，即：

<textarea>頁面要展現的默認內容</textarea>

　　　　錯誤用法：

　　　　<textarea value="頁面要展現的默認內容"></textarea>　　

　　　　2.2.2 展現樣式：左對齊、居中顯示

<!-- 內容會居中顯示 -->                                                                        
<textarea name="TREAT_CONTENT" id="TREAT_CONTENT" class="TextBox" style="width: 99%" readonly>
    ${model.PATIENTINFO.TREAT_CONTENT}
</textarea>    

<!-- 左對齊：這種方式會出現大量空格 -->    
<textarea name="TREAT_CONTENT" id="TREAT_CONTENT" class="TextBox" style="width: 99%" readonly>${model.PATIENTINFO.TREAT_CONTENT}
</textarea>    

<!-- 左對齊：推薦使用 -->    
<textarea name="TREAT_CONTENT" id="TREAT_CONTENT" class="TextBox" style="width: 99%" readonly>${model.PATIENTINFO.TREAT_CONTENT}</textarea>

　　　　注意：推薦使用第三種方式，不管該行代碼有多長，要展現的內容與標籤體之間不要出現空格

　　　　2.2.3 設置只讀

　　　　添加readonly屬性

　　　　2.2.4 設置固定長度自動換行

　　　　指定width

　　　　2.2.5 js取值（獲取文本域的內容）

// 接着上面
document.getElementById("TREAT_CONTENT").value

　　　　2.2.6 js控制文本內容在文本域中實現換行（js賦值）

　　　　使用"\r\n"或"\n\r"

// 接着上面
document.getElementById("TREAT_CONTENT").innerHTML = "aa\r\nbb";

 　　　　舉例：

　　　　CreateTime--2017年3月1日09:58:35

　　　　第一步：在頁面中建立一個文件域

var textareaTag = document.createElement("textarea");
textareaTag.id="resultData";
textareaTag.cols="100";//列數
textareaTag.rows="50";//行數
window.onload = function() {
    document.body.appendChild(textareaTag);
}

　　　　第二步：經過a標籤將獲取到的屬性"thurl"的屬性值寫到文件域，並實現自動換行

var aTags = document.getElementsByTagName("a");
var str = "";
for(var i=0; i<aTags.length;i++) {
    //這個地方看頁面中具體對應的是哪一個屬性
    var aElement = aTags[i].getAttribute("thurl");
    if (aElement) {
        str += aElement + "\n\r";
    }
}
document.getElementById("resultData").innerHTML = str;

 　　　　UpdateTime-2017年7月21日07:59:18

　　　　2.2.7 文本域textarea無論放的是什麼內容，都會以純文本形式展示

　　　　錯誤用法：文本域中放入a標籤，使其解讀成爲一個超連接

　　　　HTML部分

<textarea id="IMAGE_ADRESS" style="height:50px;width:400px;"></textarea>

　　　　JAVASCRIPT部分

window.onload = function() {
    var IMAGE_ADRESS = 'www.baidu.com';
    IMAGE_ADRESS = '<a href="consAppl_search.viewImages(\'' + IMAGE_ADRESS + '\')">' + IMAGE_ADRESS + '</a>';
    // 將a標籤輸出到頁面上並以超連接形式展示
    $('#IMAGE_ADRESS').val(IMAGE_ADRESS)
}     

　　　　結果展現：

　　　　小結：如上圖所示，textarea並未將a標籤當作HTML元素展現，而是以純文本的形式打印到頁面上，因而可知，文本框中只能存放純文本信息；

　　　　　　　想要a標籤解讀成HTML元素展現在頁面上，須要將該標籤放入到td或div標籤中便可。　　　　　　　　　　　

 

 相關推薦：

• 相似文章