I have a weird bug in my web application. Say, I have two input box on my page: Input-A and Input-B.
When I focus on Input-A, and when there is a somewhat event triggered, the focus will jump to Input-B. However, I didn't write any code to change the focus. The event also has nothing to do with focus changing, at least I didn't find it.
Therefore, I'm wondering if there is anyway to find out who trigger the focus to change. Or, can I trace the focus event?
I use JavaScript and AngularJS and Firebase.
Thanks.
Related
I have taken a look around Stack Overflow on the topic of onblur but so far have not been able to locate an approach to solve what I want to do.
What I have is a simple two column tables with an unknown number of rows. Rows are created at render time based on the number of boxes being shipped. Each column has the following name and id for the input box:
For column 1: shipItems[ rowNum ].barcode
For column 2: shipItems[ rowNum ].trackingcode
Pretty straight forward. What I want to do is validate the trackingcode and if in error alert the user and re-focus the cursor on the column/row that caused the problem. Users will be using a scanner to scan in the information.
Every things works except that I can not get the cursor to go back to the column/input that caused the issue in the onBlur event.
My understanding is that when the onBlur event fires the element is losing focus and thus the focus is being transferred to the new/next element.
I have tried to playing around with the onfocus event, onkeypress events but still have not been successful.
I am open to any ideal to get this done, I have spend way to much time on it as it is. JQuery is not out of the questions or just plan old Javascript.
UPDATE
Here is a link to the script on jsFiddle:
After reviewing your code, best I can tell you are experiencing an unusual bug in jQuery. I have seen some quirky things happen when using focus() (like having to use setTimeout). But, in your case the $(this) is somehow not resolving correctly when calling focus().
At first I thought it was because the id is not following HTML-4 standards, but correcting the id did not help. $(this) still failed to focus, despite the fact it correctly refers to the <input> element. Then I tried identifying the id with jQuery as a string $("'#" + thisId + "'")...still did not work. But, a hard coded id did work...
So, here's how I modified your code and worked around the problem to get it to focus
if( null === $text.match(/\b(1Z ?[0-9A-Z]{3} ?[0-9A-Z]{3} ?[0-9A-Z]{2} ?[0-9A-Z]{4} ?[0-9A-Z]{3} ?[0-9A-Z]|[\dT]\d\d\d ?\d\d\d\d ?\d\d\d)\b/))
{
alert("No Match");
//$(this).focus();//don't use jquery $this
var thisId = $(this).attr('id');//get the id
//use the setTimeout workaround for firefox
setTimeout(function() {
document.getElementById(thisId).focus();//use javascript to set focus
},0);
$(this).css('background-color','Red');
}
Feel free to look at the fiddle (linked above). This approach does correct the focus problem.
I figured out the issue. It turns out that IE and FireFox have very different behavior when it comes to onBlur.
I was calling focus() during the execution of the blur(). since the blur has not completed it either ignored the focus command or executes and then completes the blur.
Some browsers the focus command can cause a blur to be triggered thus creating an infinite loop with the cursor bouncing between the two fields.
Using a timeout will cause the focus to trigger outside of the blur call back function.
Under IE I can make use of onBlur and have no issues, under FF the focus never got called event with a timeout, so it needs an onChange.
I have updated my script - it runs fine on IE - http://jsfiddle.net/boyd4715/3wbtQ/34/
How is Google detecting user input? I looked around and the text field does not have the onkeyup or onchange events.
Is there any other way to detect user input in a text field?
it does have keyup and keydown listeners, but they are assigned at runtime, via addEventListener("keyup", ...). Use your browser's DOM inspector to select the input element, and then drill into the event listeners currently assigned (in webkit's inspector, that's under "Event Listeners" at the bottom of the right-hand pane) -- you'll see keyup, keydown, and several others.
It does have event listeners. Using the inspect element on chrome you can clearly see the listeners - highlighted in the screen shot below.
The same principle as autocomplete:
http://www.javascript-examples.com/autocomplete-demo/
I would say an onblur onkeyup/down event that triggers a custom event that waits for a pause or space, then sends the data, then handles the return.
After playing with it for a while here is what I came up with at jsfiddle:
http://jsfiddle.net/fauxtrot/Ejqyb/
Got an issue that is specific to Chrome; it's moving the focus from my html inputs to the first user element in a dynamically rendered form.
Example:
HTML_SELECT_00
HTML_SELECT_01
INPUT_TEXT_00
Problem: If you place the cursor in INPUT_TEXT_00 (using the mouse), as soon as you let go of the mouse button, the focus will shift back to HTML_SELECT_00. If you tab into INPUT_TEXT_00, the focus does not get 'stolen', and works as desired.
This problem does not occur in FF or in IE7/8. Only in Chrome and my version is up-to-date.
I have two events hooked to the input, onChange and onKeyPress. However, those events are not triggered simply by placing the cursor in them.
I hope someone has seen this before; I've been searching all over for a resolution.
Regards,
Randall
There's probably a label wrapping the three elements.
I had the same problem but there wasn't a label in sight. I fixed this by stopping event bubbling on the mousup event:
jQuery("input").mousup(function(event){
//more code
//...
event.stopPropagation();
});
Forcing focus() on an element is easy, but after having debug issues, I realize trying to determine where is my focus gone is a lot harder.
The thing is I'm generating a modal window using jq.UI, and from time to time, while focus is supposed to be set on first input of the form included in the modal, cursor just disappears, to never show again unless I reload the page.
Is there a straightforward way to detect where my focus/cursor is?
You can see which element it's on by checking document.activeElement, for example:
alert(document.activeElement.innerHTML); //see the content to aid in IDing it
I'm not sure if the focus event bubbles, but if it does, you could try this:
jQuery('body').focus(function(e){ console.log(e.target); })
I'm trying to modify this: jquery desktop
by adding a input field inside one of the windows. However, I can't type anything into the input. I opened firebug and the classes are flashing when I click the text input so I'm guessing that's what's blocking it. But I don't know how to fix this. Any help is appreciated.
In his very long article, do a page search for 'Cancel mousedown'. You'll see he's canceled any mousedown event that's not a link. That's what you'll have to alter to make it usable. You could either delete the whole thing (the point was to bind a context menu, which he ended up not doing) or add input as an exception like a is.