前端笔记45——JavaScript获取和设置input的值

最新推荐文章于 2025-05-13 10:06:11 发布

原创最新推荐文章于 2025-05-13 10:06:11 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaScript #input标签 #获取和设置input的值

前端专栏收录该内容

93 篇文章

订阅专栏

本文介绍如何使用JavaScript获取和设置HTML中input元素的值。通过示例代码演示了如何利用getElementById方法结合value属性来读取和修改input标签内的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在前面的前端笔记44——获取或者修改div内容中提到修改div中的内容。但是input标签中，获取和设置的方法和前面的博客是有区别的。

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="ipt" value="填写内容"/>
		<button id="btn">点击</button>
		<script type="text/javascript">
			// 点击按钮，获取input里面的内容
			// 1.找到按钮  找到input 2.点击事件  3.事件绑定
			var oBtn = document.getElementById('btn')
			var oIpt = document.getElementById('ipt')
			oBtn.onclick = function(){
				// 弹出input的内容
//				alert(oIpt.value)
				oIpt.value = "改变了内容"
			}
		</script>
	</body>
</html>

上面代码中获取input标签中的方法是input的id.value，设置内容的方法也很简单就是对input的id.value进行赋值，JavaScript获取和设置input的值就是那么简单。