Question

<!DOCTYPE html> <!-- HTML5 -->
<html>
<head>
<meta charset="UTF-8"> 
</head>

<body>
<p><button type="button" onclick="show()">Show new name</button></p>
<p>Name: <input type="text" onchange="changed()" id ="nm" name="FirstName" value="Mickey"></p>
<p>New name: <span id="sh" ></span></p>

<script>
function show()
{
    var elem = document.getElementById("nm");
    name = elem.value;
    document.getElementById("sh").innerHTML = name;
}
function changed()
{
    alert("Name changed");
}
</script>
</body>
</html>

如果用户键入新名称，更改焦点，然后单击按钮，新名称将按预期显示。但是，如果用户更改名称，然后单击按钮而不更改焦点，则不会显示新名称。为什么是这样？在我的代码中有几个输入，我想在更改时处理每个输入，然后在单击按钮时执行更多操作。问题是除非用户首先进行非直观的鼠标点击或按“输入”，否则无法识别按钮单击。有没有办法获得理想的行为？

Answer 1

这里的问题是警报。

当在元素上检测到一个mousedown和一个mouseup时，会触发click事件。

当你按下按钮时，mousedown被触发并且输入上的模糊，这会触发onchange事件。但是它会添加一个警告，它位于前面（光标和按钮之间，因此鼠标按钮永远不会触发按钮，也不会触发onclick）。

为避免这种情况，你可以：

删除警报（并且一切正常）
在按钮上注册onmousedown而不是onclick。

Answer 2

我并不完全得到你想要达到的目标。但是，如果您只想在按钮单击后更改名称，焦点仍在输入中，只需将“onchange”功能更改为show（）

<p><button type="button" onclick="show()">Show new name</button></p>
<p>Name: <input type="text" onchange="show()" id ="nm" name="FirstName" value="Mickey"></p>
<p>New name: <span id="sh" ></span></p>

example Fiddle

正如m59所述，内联JavaScript从来都不是一个好习惯。

Answer 3

当元素的值发生更改时发生onchange事件，并且当用户单击元素时发生onclick事件。

我建议你使用onblur事件。试试这个：

<p>Name: <input type="text" onblur="changed()" id ="nm" name="FirstName" value="Mickey"></p>

当对象失去焦点时会发生onblur事件。

点击此处：Demo

是否有可能在onchange事件后立即检测到onclick事件？

3 个答案: