onfocus 事件onblur 事件

最新推荐文章于 2024-02-16 17:42:45 发布

蓝色漩沐

最新推荐文章于 2024-02-16 17:42:45 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/Helloxiaovv/article/details/103905773

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(x){
	x.style.background="red";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

实例
当 input 输入框获取焦点时执行一段 Javascript代码：

定义和用法
onfocus 事件在对象获得焦点时发生。
Onfocus 通常用于 <input>, <select>, 和<a>.
提示： onfocus 事件的相反事件为 onblur 事件。
``
HTML 中:
<element onfocus="SomeJavaScriptCode">
JavaScript 中:
object.onfocus=function(){SomeJavaScriptCode}
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("focus", myScript);
`

实例
当用户离开input输入框时执行一段Javascript代码：

<input type="text" onblur="myFunction()">


**onblur 事件会在对象失去焦点时发生。
**Onblu**r 经常用于Javascript验证代码，一般用于表单输入框。**

菜鸟教程(runoob.com)

输入你的名字:

当你离开输入框, 函数将被触发将输入文字转换成大写。

```

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

document.getElementById(id)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="Hello World";
};

</script>

</body>
</html>

在这里插入图片描述

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

例子 1
<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>

例子 2
getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了：
function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

蓝色漩沐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onfocus 事件onblur 事件

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><head><script>function myFunction(x){ x.style.back...
复制链接

扫一扫