input框相关的基础知识

最新推荐文章于 2023-04-11 19:37:20 发布

目前是小白

最新推荐文章于 2023-04-11 19:37:20 发布

阅读量300

点赞数

分类专栏： JS相关问题

本文链接：https://blog.csdn.net/g_hold/article/details/81237419

版权

JS相关问题专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1.onfocus事件

onfocus获取焦点，也就是文本框输入内容，如果文本框内容是“请输入...",则输入框清空，如果不是这几个字说明是用户输入了内容，当用户输入一半再次回来输入时获取焦点之后不至于清空内容。

2.onblur事件

onblur失去焦点，当用户离开文本框，也就是用户在文本框输入之后进行了别的操作，此时就判断文本框的值是否为空，若是则显示”请输入..."，如果不为空则不显示，可能是用户一会再回来继续输入。

这两个事件参考下面这个代码

<body>
	<div class="search">
		<input type="text" value="请输入..." id="txt">
		<button></button>
	</div>
</body>
<script>
		window.onload = function() {
			var txt = document.getElementById("txt");
			txt.onfocus = function() {
				if(txt.value=="请输入...") {
					txt.value = "";
					txt.style.color = "#333";
				}
			}
			txt.onblur = function() {
				if(txt.value=="") {
					txt.value = "请输入...";
					txt.style.color = "#ccc";
				}
			}

		}
</script>

3.自动获取焦点和自动选中内容

.focus();

.select();

参考下面这个代码

<script>
		window.onload = function() {
			var txt = document.getElementById("txt");
			var sele = document.getElementById("sele");
			txt.focus();//打开网页后会自动获得文本框焦点
			sele.onmouseover = function() {
				this.select();//选择功能，当鼠标滑过文本框时会自动选中内容
			}
		}
	</script>
<body>
	自动获得焦点：<input type="text" id="txt">
	鼠标经过选择表单：<input type="text" id="sele">
</body>

4.oninput和onchange两个事件的区别

oninput事件是当内容发生变化时就触发，而onchange事件是当内容发生变化并且元素失去焦点时触发。

参考下面这个代码

<script>
		window.onload = function() {
			function $(id) {
				return document.getElementById(id);
			}
			$("txt").oninput = function() {
				if(this.value=="") {//通过value值来判断用户是否输入内容
					$("message").style.display = "block";
				} else {
					$("message").style.display = "none";
				}
			}
		}
	</script>
<body>
	<div class="search">
		<input type="text" id="txt">
		<label for="txt" id="message">必败的国际大牌</label>
	</div>
</body>