JavaScript-为文本框赋值

最新推荐文章于 2024-09-23 22:57:52 发布

小猴子的技术笔记

最新推荐文章于 2024-09-23 22:57:52 发布

阅读量1.1w

点赞数 4

分类专栏： JavaScript教程文章标签： JavaScript 为文本框赋值

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

版权

JavaScript教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.首先我们需要搭建好HTML代码骨架，然后准备好文本框。我准备了6个文本框，一个单选框，一个复选框，一个按钮，就是为了区分只是为文本框赋值，对其他没有影响，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>为文本框赋值</title>
</head>
<body>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="button" value="确认">
	<input type="checkbox">
	<input type="radio">
</body>
</html>

2.运行结果如下：

3.接下来就是为文本框赋值，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>为文本框赋值</title>
</head>
<body>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="button" value="确认">
	<input type="checkbox">
	<input type="radio">

	<script>
		// 通过getElementsByTagName来获取标签名的集合
		var inputs = document.getElementsByTagName('input');
		// 声明两个变量，为for循环做准备
		var i =0 ,length = inputs.length;
		// 通过for循环赋值
		for (; i < length; i++) {
			input = inputs[i];
			// 判断input的类型是不是文本框
			if (input.type === 'text') {
				// 为文本框赋值，因为是从 0 开始赋值的，所以想从 1 开始的话就需要 i + 1
				input.value = i + 1;
			}
		}
	</script>
</body>
</html>

4.可以看到，每个文本框都被赋予了值，结果如图所示：

5.这是一般的写法，上面代码还可以优化如下：

<!DOCTYPE html>
<html>
<head>
	<title>为文本框赋值</title>
</head>
<body>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="text"> <br>
	<input type="button" value="确认">
	<input type="checkbox">
	<input type="radio">

	<script>
		// 通过getElementsByTagName来获取标签名的集合
		var inputs = document.getElementsByTagName('input');
		// 声明两个变量，为for循环做准备
		var i =0 ,length = inputs.length;
		// 通过for循环赋值
		for (; i < length; i++) {
			input = inputs[i];
			// 判断input的类型是不是文本框
			if (input.type !== 'text') {
				// 结束本次循环，继续执行循环
				continue;
			}
			// 为文本框赋值，因为是从 0 开始赋值的，所以想从 1 开始的话就需要 i + 1
			input.value = i + 1;
		}
	</script>
</body>
</html>

6.也许有人会奇怪，为什要用不等呢？其实这个在这里面效果不是很明显，就是如果未优化的代码里面嵌套循环如果多的话会造成代码的可读性下降，代码效率下降，所以一般建议用优化后的方法。