Blur event on select boxes and Firefox - javascript

I have the following situation:
One selectbox and a tooltip that appears when the user clicks on the box to select an option. To show the tooltip can be easily done with css (select:focus ~ .tooltip) or jquery using the focus() event.
When the user picks something the select box closes and the tooltip dissapears. This can be done with the change() event.
But there is one issue. If the user opens the selectbox and clicks somewhere else on the page, the list closes and in Firefox the blur event is not triggered right away, so the tooltip remains visible. If the user makes the second click outside of the select the blur event triggers and the tooltip dissapears.
Chrome and IE is ok, Firefox is not.
Do somebody know a workaround in Firefox?
thanks,
Istvan

After playing around with this for about half an hour, I'm afraid to say my input would be: no. And for the following reasons:
Firefox doesn't fire the blur event until the second click. This is evident from looking at the dropdown on the select, which remains blue.
Therefore a pure CSS solution would definitely never work
A JavaScript solution would also be next to impossible too, as the first click seems to go nowhere
I've checked this by trying to note body and document clicks, you'll see that neither fire the first time. In fact, neither does the select, so I have on which level that click registers
See my JSFiddle for my workings. Sorry! I guess it's just a FF issue.
$(document).click(function() {
console.log("document");
});
$("body").click(function() {
console.log("body");
});
$("select").click(function(e) {
e.stopPropagation();
console.log("select");
});
Edit: Sorry, posted an old JSFiddle.

Related

e.preventDefault() - issues with applying it to all but one div

I've read quite a few things on stack related to this issue, but I can't seem to solve my problem.
Essentially, I'm using jQueryModal (http://jquerymodal.com/).
What I want to have happen is, when the modal is launched, aka:
$(".buttonSpacing").click(function() {
$("#page").modal();
}
the modal opens up as expected. Contained in a div in that modal is a contenteditable div. Basically, I want to prevent default on everything except the contenteditable div. When the modal closes, I want events to then be unbound.
Something like this:
$(".buttonSpacing").click(function() {
$("#page").modal();
$(':not(#myContentEditableDiv)').bind('mousedown',function(e)
{
e.stopPropagation(); // Tried with and without this line
e.preventDefault();
});
}
doesn't seem to work. #myContentEditableDiv loses the default functionality as well as everything else.
If a previous question has answered this, I guess I wasn't able to apply it correctly to my situation.
The reason for this is I want the cursor to always remain in the editable area, wherever it is they left it, even when I'm having them select things to dynamically add to the editable area, or if they accidentally click outside of it.
Given my situation, how can I make this happen?
Thanks for your help.
EDIT:
Here's a js fiddle showing the problem:
https://jsfiddle.net/7Lwudpr4/2/
The problem is that the mouse down event is propagating from the text area to the parent elements, which are then preventing the default action. To fix this issue, add the following:
$('#textArea').bind('mousedown', function(e) {
e.stopPropagation();
})
Updated JSFiddle: https://jsfiddle.net/gp43028d/1/
Note that you'll probably need to handle the mouseup events on your other elements, as they won't fire click events since preventDefault() is called on the mousedown event.

Input field behind a tag requires double click to focus on IE

Imagine this codepen: https://codepen.io/anon/pen/awoXKv
As you can see, I got an input field inside my a element. (This cannot be changed currently). What I want to do, that when I click the input, the input gets focused and I don't get redirected.
The above snippet does exactly this in Chrome/Firefox. But now, I tested it on IE and am experiencing an issue, that the input only gets focused, if I use double click.
I tried to focus it manually by using this $(e.currentTarget).find('input').focus();, but this didn't help. Som eother StackOverflow thread said, this is because IE lazy loads the events and I have to use a timeout fucntion
setTimeout(function () {
$(e.currentTarget).find('input').focus();
}, 100);
But even this didn't work. How can I focus an input behind an a tag in IE?
Update:
Doesn't seem like a focus problem, because when I use alert($(e.currentTarget).find('input').is(':focus')); it returns true. What else could be the problem here?

Right click acts like a left click on the event

I have this code:
document.getElementById("1").oncontextmenu = function() {
return false
}
It disables the little window that shows after a right click (only on the button/image).
On my code (https://jsfiddle.net/nnuyguat/) everything is working fine, except for when I do a right click on the image as it triggers the left click event and changes the image untill I move the mouse.
Another related problem is if I press left click without releasing and then right click (releasing the right button), it will also change the image.
I need to prevent the image changing with right clicks. It should work as the closing button of the browser (except it's another images and it doesn't close anything).
You could use event.button to check which button is pressed because event.button returns a number which indicates which mouse button was pressed.
Source
Edit:
if (event.button === 2){
// run your function
}
That should be correct, as I have never used this before.
The right click event is not triggering a left click. It is just activating your object. Your image says "click" but it is inaccurate. It should say "Active".
Second, a number is NOT a valid ID. So rename your div from id="1" to id="one" or similar.
Finally, try with this code, instead of yours:
document.getElementById("one").addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('hello from right click');
return false;
}, false);
See https://jsfiddle.net/nnuyguat/3/
The issue with your image changing on right click is not related to your javascript, but to your css. The :active CSS pseudo-class matches when an element is being activated by the user. According to the specs this should only be when the element is activated with the primary mouse button, but it seems like most browsers do not implement the spec correctly. See this question for info.
A work around maybe to abandon the :active pseudo-class, and set up a function to change the content explicitly on left click.
Its because of the oncontextmenu event. Remove it and it will work

stop chrome to show dropdown list when click a select

I want to click a <select> but stop it to show his dropdown list
$('select').click(function(){
if ($(this).find('option').size() > 20) {
// some code to do my job
return false;
}
});
The code return false can stop dropdown list display in Firefox(actually, the dropdown list display first and hide after a short while), but not work in Chrome.
I also tried let the <select> to be disabled, trigger blur() on it, or trigger click() on other element, but the dropdown list is still there unless user click somewhere else.
Is this possible? ... and Thanks!
Long story is here (if you have interested in why I want to do that):
As you know, sometimes there will be a <select> with too many
<option> in it, and when you click it, there will be a long dropdown
list. Find what you need in a long dropdown list is a terrible job...
But unfortunately there is a lot in my site.
So I think the simplest way is to write some javascript to change
that, when option is more than 20, show a dialog with a filter and a
new <select> which only have filtered <option> to let find easy.
And my problem is the dropdown list is still display, make my users
confused... They don't know where to operate. "the dialog or the
origin select".
The problem is that the default action of a select element occurs on the mousedown event, rather than click (or mouseup), so you'll need to bind an event handler to mousedown instead:
$("select").mousedown(function(e) {
if ($(this).find('option').length > 20) {
e.preventDefault(); //return false will also work
}
});
Here's a working example. Note that I've used the preventDefault method of the event object, simply because I think that makes it clearer what's actually happening. However, return false will work too.
I wanted to disable all form controls (with the 'form_control' class) in a table (id 'details_table'), including selects, and point users to an 'edit' button that opens a modal. A small tweak to the previous answers seemed to work in both Firefox and Chrome on Linux. Not tested in other browsers yet.
$('#details_table').on('mousedown', '.form-control', function(e) {
alert("Please click on the Edit button to modify details.");
e.preventDefault();
this.blur();
});

How do you exclude a page element from triggering a jQuery blur event?

I have an <input> that when focused on it shows a suggest drop down. When anything else is clicked the suggestions disappear. The problem is that I cannot seem to figure out to make it so that when the suggest <div> is clicked the blur event does not run.
Heres some of the HTML:
<label id="testTagsLabel">Tags:</label>
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe">
<div id="tagSuggest">
<ul>
<li class="tagSuggestTag">testtag</li>
<li class="tagSuggestTag">testtag2</li>
<li class="tagSuggestTag">testtag3</li>
<li class="tagSuggestTag">testtag4</li>
</ul>
</div>
Heres some of the JavaScript:
$('#testTags').focus(
function(){
$('#tagSuggest').show();
});
$('#testTags').blur(
function(){
$('#tagSuggest').hide();
});
Try something like:
$("#yourinput").blur(function(e) {
if(!$(e.target).is(".suggestDiv")) {
// close the suggest div
}
});
UPDATE: (oops, the code above doesn't work as I thought it would)
This should work:
$(document).click(function(e) {
if (!$(e.target).is("#suggest")) {
$("#suggest").hide();
}
});
Demo: http://jsfiddle.net/PNVCL/
UPDATE2:
I forgot that you still need blur, because you probably want to hide the suggest div when you switch into another input by hitting tab. Here's an updated demo: http://jsfiddle.net/PNVCL/1/
Clicking anywhere still closes the suggest div (except on the suggest div itself or the input) as well as hitting tab to switch to another input. Still needs improvements, but you should be able to pick up from here.
You should not use the blur event because it's impossible to make the difference between a blur caused by a click on the suggest box and another blur (tab, window blur, right click, ...).
A workaround given by #dakis is to use the click event on the document but the suggest box to close the box. I suggest to dynamically add and remove the document click handler to avoid overhead, and to allow the user to click in the field without closing the box.
Demo here: http://jsfiddle.net/fvwPn/
In addition I made the box to close when TAB is pressed. I also added a dirty hack version (commented) which uses the blur event and a big hack using a timeout (since the two events are fired independently, the delay depends on the client browser and speed... yep it's a dirty hack).

Categories

Resources