js如何获取用户输入的textarea的内容

JavaScript011

js如何获取用户输入的textarea的内容,第1张

<textarea id="reason"></textarea>。

var $reason = document.getElementById('reason').value//这个就是用户输入的。

extarea的内容(原生js)。

var $reason = $('#reason').val()//这个就是用户输入的textarea的内容(jquery)。

Javascript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器支持。

JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。

JavaScript虽与Java有很多相似性,但这两门编程语言从设计之初就有很大的不同,JavaScript的语言设计主要受到了Self和Scheme的影响。

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。

JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

1, 用shadow

<div style="height:0overflow:hidden">

<p class="shadow"></p></div><textarea style="overflow:hidden"></textarea><script>

textarea.addEventListener('input', function(e) {

shadow.innerHTML = this.value.replace(/\</g, '<').replace(/\>/g, '>') this.height = shadow.clientHeight + 'px'

})</script>

2, 用 contenteditable 属性

<div contenteditable="true">这里的高度会随内容自动扩展</div>

3, 如果用

textarea.style.height = textarea.scrollHeight + 'px'

这种形式也可以调整高度, 但换行的时候会有滚动条一闪而逝, 而且高度只会增加没法减少, 是体验最差的写法.

1、在react中可以给输入控件(如input type=text)加上引用名,好获取它的输入值

例如:

2、<textarea >控件,它和input不同,它是开标签,内容是包括在<textarea >和</textarea>之间的。如果需要获取<textarea >的值,同样可以用ref来获取

例如:

注意:这里log出来的是页面用户输入后的最终文字。

3、单选radio和多选checkbox,获取它们的值最好还是用一个公共变量如state来保存,因为它们的值只能在触发事件中获取,不像text控件可以后期提交时获取。初始值可以通过 defaultChecked={true} 来设置。

radio例子:

如果是checkbox,用div包住不合适,因为div每次点击只能获取点击一次的值。所以checkbox需要写到每个checkbox 控件里面的onChange或onClick事件。可以通过一个state的数组来存储变更。checkbox例子: