I want to disable click handler on other elements on focus out of text fields. It works fine on desktop browsers but I am not able to restrict click on rest of body on mobile.
$(".text-box").on("focusout", function(event) {
});
$(".any-other-element").click(function(){
})
I want that click event attached on any-other-element should not fire on focus out of textbox.
Related
Demo : https://codesandbox.io/s/jolly-glitter-zuvr8?file=/src/App.js
I have a section with a text input and a button
I want to refresh the section on blur event of text input (I force refresh with key attribute in my example)
and display a text on click event on the button
The issue : When the focus is on the input text and I click on the button, I have the blur event and the click event at same time.
The click event is ignored.
I thinks the is because the order of JS events are blur, then click.
To reproduce :
No focus on input text, then click on the button => OK
Focus on input text, then click beside on the page, then click on the button => OK
Focus on input text, then click then click on the button => Not OK (the text "clicked" is not displayed) (but with a second click => OK)
This is pretty tricky, so I'll try to explain it well.
I have a web app where I want to allow my users to change background color of some divs. To do so I'd like to use a color picker interface, and I want to use contextmenu event on target divs to open it, as they already have another behaviour attached to click event.
So the idea is to have an input type color hidden in the screen, attach its click event to contextmenu event on target divs and change background color of target divs on input type color change event.
The funny thing is that when I try to chain events, color picker doesn't open if its click event is called from within contextmenu event handler, but it does if called from within click event.
Using jQuery for code simplicity and clearness:
//this works perfectly, color picker opens
$("#myTargetDiv").on("click", function() {
$("#inputTypeColor").trigger("click");
});
//this fails miserably
$("#myTargetDiv").on("contextmenu", function() {
$("#inputTypeColor").trigger("click");
return false;
});
The most weird fact is that, if I use a third element to pass the event, say, for example that I call to an intermediate input type text which passes the call from myTargetDiv to inputTypeControl, the click event in the intermediate element fires (even when called from within contextmenu event handler) while the event in the input type color doesn't fire.
But if you click directly on the intermediate input type text the color picker opens!
//If you right click on myTargetDiv "firing!" appears on console, but color picker doesn't opens
$("#myTargetDiv").on("contextmenu", function() {
$("#intermediateElement").trigger("click");
return false;
});
//If you click on intermediateElement, however, the color picker opens!!!
$("#intermediateElement")on("click", function() {
console.log("firing!");
$("#inputTypeColor").trigger("click");
});
I've reproduced this behaviour in Firefox and Chrome, and I'm not very sure if it's an expected feature, a bug in browsers input type color implementation or a problem with event handling from jQuery (I haven't tried launching the events myself yet).
https://jsfiddle.net/bardobrave/0z6ev4rd/1 If you click on "FIRE!" the color picker opens, but if you right click on it the color picker doesn't opens despite if you click on input type text it does.
Anyone can give some insight on the matter?
So to execute your own contextual menu, you may want to bind to the following:
$("#firestarter").on("contextmenu", function(e) {
// Execute your menu with Color Picker Option
return false;
});
This could be something simple like a List wrapped in a div, or more complex like JQuery UI Menu.
<div id="menu">
<ul>
<li class="menuItem" id="menuOption-1" data-action="color" data-rel="#myColor">Select Color</li>
<li class="menuItem" id="menuOption-2" data-action="reset">Reset to Default</li>
</ul>
</div>
Now the user has something to click on, which can be carried over:
$("#menu li.menuItem").on("click", function(){
switch($(this).data("action")){
case "color":
$("#menu").hide();
var target = $(this).data("rel");
$(target).trigger("click");
break;
case "reset":
$("#menu").hide();
// Do something else
break;
default:
$("#menu").hide();
}
});
I have not found all the details on the HTML5 input type='color'. This is a good start: https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29 I suspect that since the Color Picker dialog is generated by the browser itself as well as a Contextual Menu, I am guessing it's a security or control feature that is preventing it being triggered by a Right-Click type of event.
Ok, I've found a way to fix the functionality.
To trigger color picker opening through a div context menu event.
As this event cannot call the input type color click event (for reason unknown), a feasible solution is to add a hidden div which pops on mouse position when context menu event is called on target div.
This hidden div poses as a context menu and can include a message: "click to open color picker" or something like that.
Then, you attach color input click event to this hidden div click event.
Coming from another click event, the color picker opens correctly, you've forced your user to make one click more than desired (one right click to open the fake context menu and another one to open de color picker), but functionality works in the end and it's quite consistent with the effect seeked.
The real question still applies:
Why input type color click event fires when called from within any other click event handler but fails if called from within context menu event handler?
Some DOM events require user interaction to be fired programmatically,, i.e. you can trigger a click programmatically only in the process of handling some other click or keyup etc.
In my pop up dialog box I'm using jquery live() to change the value of the textarea when it loses the focus (blur event). When I close the dialog by clicking the cancel button it works fine in desktop browsers, but in my ipad devices, when i tired to close the dialog by clicking the cancel button the following behaviour occurs
1) on my first tap, the blur event is called and the textarea value changes (virtual keypad also hides).
2) on second tap, the pop up window closes.
Note : when I makes the value attribute of the textarea on blur event to null. it works fine in ipad devices.
I want the pop up to be closed on single tap itself.
Some suggestions.
Are you binding the "click" event ?
Try to change from live() to on(): https://api.jquery.com/on/
Try stopping propagation and default event:
$("some_element").on('click', function(ev) { ev.stopPropagation(); ev.preventDefault(); /* Your code here */ return false;});
Are you trying to create a placeholder text for the input ? If so you can use the "placeholder" attribute in HTML5 to implement this without any scripts.
I have bound the jQuery event handler mouseover to an element with the below code:
jQuery(document).ready(function(){
jQuery('#buyout_field').mouseleave(function() {
alert('Hi!');
});
});
This works great, but then I noticed that if the user selects a value from those dropdown auto-complete menus the browser shows you of your past data you have entered that the mouseleave event fires too early for my liking. Yes, it fires at the right time (when their mouse leaves the element); however I need the function to fire only after the user has entered data into the field.
I then added the focusout handler to cover more bases with:
jQuery('#buyout_field').focusout(function() {
alert('Hi!');
});
However it's still possible the user may select a value from the dropdown list AND not click outside the text field.
Do I have any other options here at firing the function or do I have to resort to perhaps using setTimeout() to allow the user time to select something from the autocomplete list and THEN fire the function OR should I just disable autocomplete?
Fiddle: http://jsfiddle.net/wbsDy/
I need to create a part of a form where if you click on a select, a checkbox field should popup and if you click anywhere else again, this field should disappear. I would like to do this with focusing the field after clicking on the select, but for some reason, my checkbox field loses its focus not only when you click anywhere else out of it, but even when you click on a label of a checkbox INSIDE of it. So the problem is that I am focusing an element in which I click on a label and the focused parent element loses its focus for some reason I can not figure out.
The code: http://jsfiddle.net/RELuL/2/
Any helps appreciated!
P.S.:
Just some bonus question :) As you can see, if you click on the select input, my hidden checkbox section is displayed a little late, it is not shown instantly which looks a little bad. Any tips how to optimize this?
EDIT: I use Firefox 13.0.1
When you click on a <label>, the browser focuses the associated input field. So focus leaves the parent and goes to the checkbox (and your blur event handler is called).
Instead of focusing the parent div and relying on it being blurred, attached a click handler to the document:
$(document).click(function() {
multiSelectUpdate();
});
$('.multiselect.container').click(function(event) {
event.stopPropagation(); // prevent click event from reaching document
});
Also, in Webkit clicking on <select> doesn't fire a click event. A workaround is to use the focus event instead.
Demo
Ok two simple changes got this working first change the click listen on the select box to a mousedown listener like so.
$('.multiselector').mousedown(function(event) {
event.preventDefault();
currentMulti = $(this).attr('id');
thisOffset = $(this).offset();
$(this).hide();
$('#' + currentMulti + '-container')
.css('top', thisOffset.top + 'px').show().attr("tabindex", -1).focus();
$(this).addClass('active');
});
this triggers before the box is able to comes up so it never shows.
Secondly the blur listener was believing it lost focus when a child got focus to fix this change to focusout.
$('.multiselect.container').focusout(function() {
multiSelectUpdate();
});
This only fires when the selector loses focus even focus currently on child of selector.
Fixed fiddle
enjoy :)
EDIT
For some reason blur fires multiple times on FF so to work round this use instead of blur mouseleave.
$('.multiselect.container').mouseleave(function() {
multiSelectUpdate();
});