Solved

javascript block focus event

Posted on 2012-04-13
6
367 Views
Last Modified: 2012-04-13
hi

suppose we a input text

<input id=myField type=.. onFocus="call..">

Open in new window


if the user  clicks on the field, the focus gets triggered and the action is called.

OK.

but i want that when i manually focus to the myField with this code

document.getElementById("myField").focus();

Open in new window


, the focus event SHOULD NOT triggered. how can i achieve this?

i do not want to that with using some blocker flags or global variables to keep track of whether focus should be fired or not.
0
Comment
Question by:benchpresser
  • 3
  • 2
6 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
before calling this focus() method, unbind the focus event handler
document.getElementById("myField").onfocus = null;
document.getElementById("myField").removeEventListener("onfocus");

check this
http://www.quirksmode.org/js/events_advanced.html

and then set it back again after calling focus method
0
 

Author Comment

by:benchpresser
Comment Utility
On this page I explain the two advanced event registration models: W3C’s and Microsoft’s. Since neither is cross–browser supported, their use is, for the moment, deprecated.

does it work on last ie and last ff?
0
 

Author Comment

by:benchpresser
Comment Utility
my scenario is:

a have page user clicks on a textfield. it has focus registered to it. it invokes some ajax request and goes to server. i want that the focus (blinking of cursor) remains on this textfield after we got the response. because the blinking gets lost after the response, i manually focus to that textfield when i handle the response.

because i manually set focus to this textfield it again fires focus and an endless loop starts.
i want to prevent the second firing of focus action. but of couse if the user clicks another textfield and again clicks back to our initial field, it should accept and trigger focus event again.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
Comment Utility
<<does it work on last ie and last ff?>>
Yes,
document.getElementById("myField").onfocus = null;
should work on all browsers
0
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 250 total points
Comment Utility
Take a look at this jsfiddle - jQuery allows a bit more flexibility with the trigger method.

function eventFocus(event, parameter) {
    if (typeof(parameter) == "undefined") {
        if (typeof(window.manualFocus) == "undefined") {
            $(this).val("User Focus"); // <<== User focus code here
        }
        delete window.manualFocus;
    } else if (typeof(parameter) != "undefined") {
        $(this).val("Manual Focus"); // <<== Manual focus code here
        window.manualFocus = true;
    }
}

function focus() {
    $("#myField").trigger("focus", true);
}

Open in new window

0
 

Author Comment

by:benchpresser
Comment Utility
thank you very much it was very helpful.

how can we unbind or undelegate an action which was defined like that below:

<input ... onFocus="myAction">

Open in new window


Because if we have the form below we can unbind it.

<input>
<script>
$('#myAction").bind("focus", function() )..

</script>

Open in new window


i can unbind that.

but i can unbind when defined as onFocus=".."
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now