设置和获取文本框的value

最新推荐文章于 2023-02-13 08:25:00 发布

我为杰伦代言

最新推荐文章于 2023-02-13 08:25:00 发布

阅读量329

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52385232/article/details/126711310

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

设置和获取文本框的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-获取文本框的value</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				1、JavaScript包括三大块：
					ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
					DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。
						var domObj = document.getElementById("id");
					BOM：Browser Object Model（浏览器对象模型）
						关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
				2、DOM和BOM的区别和联系？
					BOM的顶级对象是：window
					DOM的顶级对象是：document
					实际上BOM是包括DOM的！
			*/
		   /*
		   window.onload = function(){
			   //var btnElt = window.document.getElementById("btn");
			   var btnElt = document.getElementById("btn");
			   alert(btnElt); // object HTMLInputElement
		   }
		   */
		  
		  window.onload = function(){
			  var btnElt = document.getElementById("btn");
			  btnElt.onclick = function(){
				  /*
				  // 获取username节点
				  var usernameElt = document.getElementById("username");
				  var username = usernameElt.value;
				  alert(username);
				  */
				 // alert(document.getElementById("username").value);
				 
				 // 可以修改它的value
				 document.getElementById("username").value = "zhangsan";
			  }
		  }
		</script>
		
		<!--
		<input type="button" id="btn" value="hello" />
		-->
		
		<input type="text" id="username" />
		<input type="button" value="获取文本框的value" id="btn"/>
		
		<hr>
		
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("setBtn").onclick = function(){
					document.getElementById("username2").value = document.getElementById("username1").value;
				}
			}
		</script>
		
		<input type="text" id="username1" />
		<br>
		<input type="text" id="username2" />
		<br>
		<input type="button" value="将第一个文本框中的value赋值到第二个文本框上" id="setBtn" />
		
		<!--blur事件：失去焦点事件-->
		<!--以下代码中的this代表的是当前input节点对象,this.value就是这个节点对象的value属性。-->
		<input type="text" onblur="alert(this.value)" />
		
	</body>
</html>