实时获得输入表单的值

2015-12-06

假设我们有两个textarea，一个用来表单输入，一个用来实时展现输入的内容。

刚开始我准备用onChange结果发现这个对表单输入的检查是在失去焦点之后的，就是说在失去焦点才对表单进行检查，如果内容改变才触发。

接着找，还有onpropertychange，但是网上说它是IE专用的，结果我自己测试什么结果都没有。。。

终于找到了oninput，这个才是货真价实的表单输入改变即触发的事件。网上说不支持Firefox，结果我用Firefox，Opera，chrome，edge亲测都支持的非常好。

为什么会这样，网上说的都是骗人的，乖乖用oninput就好。
不过网上还说了一个替代的办法，就是定时检测输入表单的变化，想了一下理论上是可行的，但是这样的话会不会太浪费了，每秒钟或者多久检查一次。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Textarea</title>
	<script>
	window.onload = function(){
		document.getElementById("text").oninput = function(){
			result = document.getElementById("text").value;
			document.getElementById("result").value=result;
		}
	}

	</script>
</head>
<body>
	<div>
		<textarea name="name" id="text" cols="30" rows="10"></textarea>
		<textarea name="result" id="result" cols="30" rows="10"></textarea>
	</div>
</body>
</html>

本文固定链接：https://windard.com/project/2015/12/06/Get-Input-Text-In-Time
原创文章,转载请注明出处：实时获得输入表单的值 By Windard

实时获得输入表单的值

Blog

Opinion

Project