Chrome Automatically Moving Focus - javascript

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();
});

Related

javascript how to determine what is cancelling an event

I have jquery, bootstrap included in a page I'm writing. It's a complex page. The problem I'm having is with Internet Explorer not seeing mousedown event. Chrome and FF both see the event just fine but not IE.
I wrote a test page with the event and it worked just fine in IE. So my question is...
Is there a way through the developer tools to determine what is cancelling an event?
I have a suspicion that one of the many .js files I've included is cancelling the mousedown event and IE isn't seeing it anymore. Chrome and FF does though. So I'm not 100% that it's being cancelled but it's my only guess I can come up with.
Code is really irrelevant since it's all of jquery and bootstrap. However, I am playing with divs that are draggable and resizeable. That's why I need to use jquery. The bootstrap is used because I also have a wysiwyg editor on the page.
Please don't recommend click. I need mousedown. When the mouse is down the border around the draggable and resizeable div turns red and I have some code that selects that div to capture top, left, width, and height as it's being moved and resized.
If click was selected as the event, the user would have to click the div box first then click and hold to move it. That's not a user friendly interface.
Any help is greatly appreciated.
What do you exactly mean as cancel, .preventDefault() or .stopPropagation? If we are talking about preventDefault - you should still be able to add event listener to parent container and then see your event object - it might have some data to traceback. Alternative would to override jQuery .on method and see who actually subscribes to the event.
After little more thinking - add another listener BEFORE the malicious one, to do that insert document-ready handler with event binding right after jquery loading code. In your new mousedown handler try to override problematic method of the event.
UPDATE:
you should try to check all events attached to your element one by one. To do that - check this post jQuery find events handlers registered with an object
In short - try using jQuery._data( elem, "events" ); to see attached event listeners and inspect their code in your code base. After you find the reason it will be much easier to reach the desired functionality. Before that it is just a guesswork.

Drag or Edit, in a single click?

I have divs, which are made to textinput fields by a plugin. Also those divs are draggable.
Right now, I have reached, that if you drag the div, it gets dragged, and if you just click on it, it gets a ".focus()".
The problem is now, that if I click it once, i get a focus on it. But the cursor jumps to the beginning of the line.
What I want, is the cursor on the place, I clicked.
How can I do this with jquery? Thanks
EDIT (My JS Code):
$('.mydiv').click(function(){
//actually, it does not focus on "$(this)" but on a div inside ".mydiv" which
//is generated by the plugin
$(this).focus();
})
You could consider listening for mouseup and mousedown instead of click, which would help you distinguish between which event the user is performing. Like, if there is a mouse down event, and the user moves the mouse before a mouseup event, then you're in "drag" mode. If there's a mouseup event, and the user is not in "drag" mode, then the user has clicked, and you can fire a focus event.
That's the approach I would take without knowing more about what you're doing.
The truth is that you have a considerably more complex interface requirement than most, meaning you're going to have to give the computer more instructions to determine what to do :)

Capturing first click event on a canvas without focus

I have a Canvas which responds to mousedown events on it. I am then adding an input element to the DOM, and absolutely positioning this so it is over the canvas.
After then user has clicked on the input element, and entered some text, they then click back to the canvas. My problem is that this first click merely sets the focus back to the canvas, but is not registered as a mousedown event on the canvas element.
What can I do to make sure that the first click is registered?
How are you attaching the events? This should "just work", unless there are extenuating circumstances.
Here's an example:
http://jsfiddle.net/bSpe4/
Depending on what your code looks like, giving your canvas a tab index value may also help.
theCanvas.tabIndex = 0; // might fix your particular issue
I just had exactly this problem. I needed to listen for both left and right clicks and was using a mousedown.
In case anyone finds this as I just have. I "solved" it by attaching the event to mouseup rather than mousedown.
That way the focus happens when on mousedown and the event triggers on mouseup which is fine for what I'm doing.

Debugging issues : detect where my focus is with jQuery?

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); })

jQuery Click/Change event not working properly in IE7/8

I am binding an event to a checkbox's change or click event which works fine in Firefox but in IE I have to click anywhere else (causing the blur) event before the event is fired.
I have read and believe this is down to the way IE fires the events, but is there anyway I can get round it?
The whole point is that it is a smooth search feature which doesn't need a search button to be clicked
$('#sidebar .itemSearchModule-Form input[type=checkbox]').click(function() {
$('#sidebar .itemSearchModule-Form .saveButton').click();
});
The change event requires a blur to happen first. The Click event should not. You could always force a blur event if you wanted by $(elem).blur()
Paolo Bergantino was right so this answer credit should go to him.
It seems my code was all screwed up and another selector was getting tied up with the sample I used above.
The CLICK event does work in IE I can confirm, if you are suffering the same problem ALL I can suggest is you check your code
try giving that checkbox a class like chkbx and try:
$('.chkbx').click(function() { etc...
its just for debuggin your selector.. being sure problem is in the action. i think for IE you need to use GetElementByID.

Categories