请问如何模拟失去焦点事件呢?
完整程序如下。
我在按钮的click事件中,让两个input表单失去焦点。但是为什么点击按钮后,控制台不会输出username和password呢?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>失去焦点事件</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<form>
<input type="text" placeholder="用户名" id="username">
<input type="password" placeholder="密码" id="password">
</form>
<button id="button">click</button>
<script type="text/javascript">
let eleUsername = document.getElementById("username"),
elePassword = document.getElementById("password"),
eleButton = document.getElementById("button");
// 失去焦点时输出id
eleUsername.addEventListener("blur", function()
{
console.log(this.id);
});
// 失去焦点时输出id
elePassword.addEventListener("blur", function()
{
console.log(this.id);
});
// 点击按钮,让两个input表单发生失去焦点事件
eleButton.addEventListener("click", function()
{
eleUsername.blur();
elePassword.blur();
});
</script>
</body>
</html>26
收起
正在回答 回答被采纳积分+1
5回答
我学习太差被关起来了
2020-01-09 15:13:28
解决方案如下:
// 点击按钮,让两个input表单发生失去焦点事件
eleButton.addEventListener("click", function()
{
eleUsername.focus();
eleUsername.blur();
elePassword.focus();
elePassword.blur();
});
我学习太差被关起来了
2020-01-08 22:03:50
类似的还有click事件。但是click事件却没有问题,程序如下所示。
点击button3,控制台那个输出button1和button2。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击事件</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div>
<button id="button1">button 1</button>
<button id="button2">button 2</button>
</div>
<button id="button3">button 3</button>
<script type="text/javascript">
let button1 = document.getElementById("button1"),
button2 = document.getElementById("button2"),
button3 = document.getElementById("button3");
button1.addEventListener("click", function()
{
console.log(this.id);
});
button2.addEventListener("click", function()
{
console.log(this.id);
});
// 点击button3,让button1和button2发生click事件
button3.addEventListener("click", function()
{
button1.click();
button2.click();
});
</script>
</body>
</html>



恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星