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 に答える