文本域textarea

二、文本域

　　（一）语法

　　　　<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 设置只读

　　　　添加只读属性

<textarea readonly></textarea>

$('#TREAT_CONTENT').prop('readonly', true)
// 或者
$('#TREAT_CONTENT').attr('readonly', false)

添加禁用属性

<textarea disabled></textarea>

$('#TREAT_CONTENT').prop('disabled', true)
// 或者
$('#TREAT_CONTENT').attr('disabled', false)

　　　　2.2.4 设置固定长度自动换行

　　　　指定width

　　　　2.2.5 js取值（获取文本域的内容）

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

　　　　jquery取值

$('#TREAT_CONTENT').val()

    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标签中即可。　　　　　　　　　　　

2022年4月19日09:54:29

2.2.8 设置文本域的宽度和高度

有两种实现方式

方式一：设置rows和cols

<textarea name="SH_REMARK" class="TextBox" id="SH_REMARK" rows="5" cols="80"></textarea>

方式二：设置width和height

<textarea name="SH_REMARK" class="TextBox" id="SH_REMARK" style="width: 98.6%; height: 100%;"></textarea>

2022年8月13日19:56:30

2.2.9 添加默认显示内容

使用属性placeholder即可。

<textarea name="SJ_REMARK" class="TextBox" id="SJ_REMARK" rows="3" cols="80" style="width: 98.6%;" placeholder="送检备注"></textarea>
                                

2023年1月31日11:37:25

2.2.10 js赋值

// 方式一
$('#sqlText').val(result.sql);
// 方式二
$('#sqlText').text(result.sql);
// 方式三
$('#sqlText').html(result.sql);

 

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

• 个人主页