Home/ Questions/Q 7161721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T13:36:51+00:00

I try to show text box (#dimVal), when div(#CanvasArea) is clicked. And I want

  • 0

I try to show text box (#dimVal), when div(#CanvasArea) is clicked. And I want to make this text box disappear, when it loses its focus.

    <head>
    <script src="jquery-1.5.1.js" type="text/javascript"></script>
    </head>

    <body>
    <div id = "CanvasArea", style = "width:50%; height:600px; border:2px; border-color:orange; border-style:solid; float:left">
    <h3>Click Me</h3>
    </div>

    <input type="text", id="dimVal", value="111", style="position:absolute; display:none; left:300px; top:300px" />

    <script type="text/javascript">
    onMouseDown = function(e){
        $("#dimVal").show();
        $("#dimVal").focus();
        $("#dimVal").focusout(onLostFocus);
    }

    onLostFocus = function(e){
        $("#dimVal").hide();
        $("#dimVal").unbind("focusout");
    }

    $("#CanvasArea").bind("mousedown", onMouseDown);
    </script>

    </body>

I wonder why “focusout” event fires right after mouseclick?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was not able to get your code to work in its current form, so I rewrote it somewhat using the jQuery mouseup function and the newest version of jQuery:

    $(document).ready(function() { 
$("#CanvasArea").mouseup(function() {
    $("#dimVal").show();
    $("#dimVal").focus();
    $("#dimVal").focusout(onLostFocus);
});

onLostFocus = function(e){
    $("#dimVal").hide();
    $("#dimVal").unbind("focusout");
}
});

    this works as intended, shows up when canvas area is clicked and removes focus when the user clicks off the form.

    • 0