当前位置:首页 > java知识学习_java技术文章 > 正文

textarea赋值取值与应用详解介绍汇总

浏览389+

一、textarea标签介绍

textarea是超文本标记语言html页面中定义的多行文本输入控件标签,也被称作多行文本编辑控件,常作为表单中的元素使用,用户可在其文本区域中写入文本提交到后台程序。

textarea属于双标签格式的闭合标签,格式如下:<textarea >这里写内容</textarea>, <textarea> 支持表单<input>组件中 支持的所有的属性、样式和事件。

二、textarea标签中的常用属性详解

首先,textarea中最常用的属性就属于cols属性和rows属性这两个,因为这两个属性控制了文本框的长度和宽度的大小,实际工作中更建议配合CSS的样式来控制文本框的尺寸。当输入框的字符数每行中超过了限制之后,就可以自动换下一行,高度超过那个限制之后,就会自动展示出上下的滚动条。

cols和rows属性的应用

cols和rows属性的应用

另外,textarea还有一些其他属性,比如说是id、class以及readonly属性可以设置为文本是否可修改,还有最重要的一点就是textarea标签没有value这个属性,所以具体的相关赋值问题,在接下来的篇幅中会详细讲解

textarea标签常用属性汇总一览

textarea标签常用属性汇总一览

三、JQuery给textarea取值和赋值

jquery给textarea赋值方法代码如下:

方法一:$(“#id”).val(“textarea赋值”);

方法二: $(“#test”).html(“testtest”);

方法三:$(“#t1”).text(“xxxxxx”);

jquery赋值textarea代码一览

jquery给textarea取值方法代码如下:

方法一:$(“#id”).val();

方法二:$(“#textarea”).text();

方法三:$(“#test”).html(“testtest”);

注意事项:

不同的浏览器兼容性不一样,IE浏览器中调用text()方法和html()能够正常获取值,而火狐和谷歌浏览器却不行,换用val()方法就正常了,同理,textarea赋值的方法也会有同样的兼容问题。

四、js给textarea设置赋值

js作为脚本语言,通常操作document文档对html标签赋值和取值,具体代码实现方式如下:

方式一:document.getElementById(“id”).innerHTML = “成功赋值啦”;

方式二:document.getElementById(‘ide’).value =”赋值成功了”;

方式三:document.getElementById(‘ide’).innerText =”xxxxxx”;

js赋值textarea代码一览

五、vue.js给textarea赋值与取值

vue中需要使用v-model与textarea文本框属性进行绑定,然后调用vue代码进行赋值。

html代码:

<div id=”app”><textarea v-model=”str”></textarea></div>

vue实现赋值代码:

var vm = new Vue({

el: ‘#app’,

data: {str: ‘这是测试内容’}

});

测试结果:

vue赋值textarea测试结果一览

 

以上便是小编能够汇总到的所有的textarea标签的赋值和取值的方式,希望对大家的学习能够起到一定的帮助作用,更加深刻的熟识textarea标签。

另外还需要注意的就是浏览器的兼容性问题,不同的浏览器,对不同的方法效果都不太一样,或许以后浏览器在以后版本更新之后会解决这种问题,如果不行的话,只能我们自己代码判断哪个浏览器用哪种方式赋值。

 

相关文章推荐

用javascript方法 给textarea 赋值,在线等

js–textarea的取值赋值

java中如何将textarea赋值给string?

HTML中的标签textarea的属性及用法

ajax 异步请求 代码

原生JS如何获取textarea输入框里面的值?

textarea根据内容自动增加高度

textarea 为什么删除内容之后就不能再赋值了呢

textarea高度自适应自动增高撑开