0

你好，

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

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

我没有任何想法来实现这一目标。有人可以帮助我吗？

这是代码

<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。

谢谢。

4

2 回答 2

4

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

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

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

现在该按钮将几乎立即隐藏。人眼应该不会注意到，但计算机可以分辨出差异并允许您单击按钮。

于 2013-01-23T09:04:12.013 回答
1

事件处理非常重要，理解它们何时被触发是最重要的 onmousedown事件将覆盖文本框的 onBlur 效果，这是必需的。

检查工作 示例在这里

   <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>
于 2013-01-23T09:32:25.347 回答