JavaScript-用字符串和数组两种方法获取文本框的值

最新推荐文章于 2022-06-26 01:29:03 发布

小猴子的技术笔记

最新推荐文章于 2022-06-26 01:29:03 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript教程文章标签： JavaScript 获取文本框的值字符串数组

本文链接：https://blog.csdn.net/MonkeyBrothers/article/details/79254446

版权

JavaScript教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.这里将介绍两种方法，分别是字符串和数组的方法。因为文本框获得是字符串，所以用字符串做拼接的方法是比较容易想到的，但是我们知道字符串是不可变得，需要多个字符串才能拼接出我们想要的值，这样就多开辟了一些空间，所以就有了数组的优化方法。

2.首先我们把骨架搭好，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>为文本框赋值</title>
</head>
<body>
	<input type="text" value="通过"> <br>
	<input type="text" value="JavaScript"> <br>
	<input type="text" value="给"> <br>
	<input type="text" value="文本框"> <br>
	<input type="text" value="赋值"> <br>
	<input type="text" value="成功"> <br>
	<input type="button" value="获取" id="btn">
	<input type="checkbox">
	<input type="radio">
	
</body>
</html>

3.运行结果如图所示：

4.通过JavaScript来获取文本框的值，代码实现如下：

<!DOCTYPE html>
<html>
<head>
	<title>为文本框赋值</title>
</head>
<body>
	<input type="text" value="通过"> <br>
	<input type="text" value="JavaScript"> <br>
	<input type="text" value="给"> <br>
	<input type="text" value="文本框"> <br>
	<input type="text" value="赋值"> <br>
	<input type="text" value="成功"> <br>
	<input type="button" value="获取" id="btn">
	<input type="checkbox">
	<input type="radio">
	<script>
		// 通过ID获取按钮
		var btn = document.getElementById('btn');
		// 给按钮注册点击事件
		btn.onclick = function () {
			// 通过标签名获得input集合
			var inputs = document.getElementsByTagName('input');
			var i = 0, len = inputs.length;
			// 声明一个空字符串用来接收拼接的字符串
			var str = '';
			// 循环取出文本框中的值
			for (; i < len; i++) {
				var input = inputs[i];
				if (input.type !== 'text') {
					continue;
				}
				str += input.value;
			}
			// 控制台输出拼接后的语句
				console.log(str);
		}

	</script>
</body>
</html>

5.当打开页面之后不要急着点击“获取”按钮，推荐用谷歌或者火狐浏览器，按“f12”或者右键查看页面源代码，找到“console”控制台。

6.之后点击“获取”按钮，观察控制台变化。

7.这样我们就通过JavaScript获取到了文本框的值，但是这种方法是字符串拼接方法获取的，下面介绍数组方法获取，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>为文本框赋值</title>
</head>
<body>
	<input type="text" value="通过"> <br>
	<input type="text" value="JavaScript"> <br>
	<input type="text" value="给"> <br>
	<input type="text" value="文本框"> <br>
	<input type="text" value="赋值"> <br>
	<input type="text" value="成功"> <br>
	<input type="button" value="获取" id="btn">
	<input type="checkbox">
	<input type="radio">
	<script>
		// 通过ID获取按钮
		var btn = document.getElementById('btn');
		// 给按钮注册点击事件
		btn.onclick = function () {
			// 通过标签名获得input集合
			var inputs = document.getElementsByTagName('input');
			var i = 0, len = inputs.length;
			// 声明一个数组用来接收拼接的字符串
			var arr = [];
			// 循环取出文本框中的值
			for (; i < len; i++) {
				var input = inputs[i];
				if (input.type !== 'text') {
					continue;
				}
				arr.push(input.value);
			}
			// 控制台输语句
				console.log(arr);
		}

	</script>
</body>
</html>

8.我们将得到如图所示的结果：

9.我们确实通过数组获得到了文本框的值，但是这种获取的方式并不是我们想要的一句话的形式，优化过后的代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>为文本框赋值</title>
</head>
<body>
	<input type="text" value="通过"> <br>
	<input type="text" value="JavaScript"> <br>
	<input type="text" value="给"> <br>
	<input type="text" value="文本框"> <br>
	<input type="text" value="赋值"> <br>
	<input type="text" value="成功"> <br>
	<input type="button" value="获取" id="btn">
	<input type="checkbox">
	<input type="radio">
	<script>
		// 通过ID获取按钮
		var btn = document.getElementById('btn');
		// 给按钮注册点击事件
		btn.onclick = function () {
			// 通过标签名获得input集合
			var inputs = document.getElementsByTagName('input');
			var i = 0, len = inputs.length;
			// 声明一个数组用来接收拼接的字符串
			var arr = [];
			// 循环取出文本框中的值
			for (; i < len; i++) {
				var input = inputs[i];
				if (input.type !== 'text') {
					continue;
				}
				arr.push(input.value);
			}
			// 控制台输语句
			var str = arr.join('');
				console.log(str);
		}

	</script>
</body>
</html>

10.再次刷新，点击“获取”按钮就能够得到我们想要的字符串。