Question

您好，

与输入相邻的按钮。该按钮默认是隐藏的，当输入获得焦点时将显示该按钮，如果输入失去焦点，它将再次隐藏。

我写了一个代码来实现这一目标。但问题是按钮的事件没有被触发，因为它在输入失去焦点时被隐藏。

我无法实现这一目标。有人可以帮助我。

这是代码

<html>
 <head>
 <style>
  .icon{
   visibility:hidden;
  }
 </style>
 </head>
 <body>

   <input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
   <input type="button" class="icon" value="?" id="f4_1" onClick="alert('hi..')"/>

<script>
    function onOver(f4Id){
      document.getElementById(f4Id).style.visibility = "visible";
    }

    function onOut(f4Id){
        document.getElementById(f4Id).style.visibility="hidden";
    }
</script>
 </body>

</html>

注意：使用纯javascript来实现。不要使用任何jQuery。

感谢。

Answer 1

实际上，这些事件的顺序因浏览器而异。如果我没记错的话，如果点击它就会触发按钮，而Firefox则不会。

无论如何，可以通过添加一个小延迟来解决问题。将您的onOut功能更改为：

function onOut(f41d) {
    setTimeout(function(){document.getElementById(f41d).style.visibllity="hidden";},25);
}

现在按钮几乎会立即隐藏。它应该是人眼无法察觉的，但计算机可以区分并允许您单击按钮。

Answer 2

事件处理非常重要，了解它们何时被解雇是非常重要的 onmousedown事件将覆盖textbox的onBlur效果，这是必需的。

检查工作 Example Here

   <input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
   <input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/>

<html>
 <head>
 <style>
  .icon{
   visibility:hidden;
  }
 </style>
 </head>
 <body>

   <input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
   <input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/>

<script>
    function onOver(f4Id){
      document.getElementById(f4Id).style.visibility = "visible";
    }

    function onOut(f4Id){
        document.getElementById(f4Id).style.visibility="hidden";
    }
</script>
 </body>

</html>

javascript中缺少逻辑

2 个答案: