文本域
CreateTime--2017年5月23日15:12:08
Author:Marydon
二、文本域
(一)语法
<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标签中即可。