Javascript Event Key Property Mixup in FF - javascript

This is a weird bug, indeed. In Chrome (6.0.472.62, latest) and IE8 (at least), this behaves correctly, but in FF (3.6.9, latest) both the click event and enter event register, making it hard to discern between the behavior.
Check out this code: http://jsfiddle.net/QmkwY/1/, click on the search box in the "results" and just hit enter. The results underneath should register click event: 1 enter event: 13, which is clearly incorrect.
I have different things happening for click events and enter events on my page, so when an enter event registers as a click event, you can imagine the frustration!
Anyone have a clever solution?

In clickEvent, you can check e.pageX and e.pageY to be sure they have values to see if it was actually clicked.
if (e.pageX == 0 && e.pageY == 0) {
return;
}
But that will also affect "clicking" the button via spacebar. If that's not ok, you'll need to bind spacebar to the button separately.
$('#button').keyup(function (e) {
if (e.which == 32) {
// do something
}
}

You are binding to event to '#button' it should be '#search'

Well, when your button is hidden I'm only getting the enter event, and not the click event in Chrome. However, when I show the button I get both. I also inserted a button between your button and the input, and that causes it to not fire the click event.
I believe this is intended as a shortcut to submit forms, you could do workarounds as others have posted, but I don't think this is a real 'problem.'

Related

mouseLeave is trigged on native input autofil

I need to show my pop-up when the mouse leaves the <body>, this identifies an exit intention.
So when my clients are typing their emails, the popup just appears at the exact moment their pointer is over the suggestion and it should not have happened. But it happens because this part is not in the DOM, so it triggers the mouse leave
however, this event is triggered when the mouse is over a native input suggestion on browsers (I tested on Firefox and Chrome).
So, any ideas how can I skip this fake trigger?
document.body.onmouseleave = function(e) {
console.log("mouse leave was trigged")
}
Take a look what is happen:
I've encountered the same issue, solved it by looking at what exactly triggered the mouseleave event. So if it was not an input field from your form, you could proceed and show your popup
$('body').on('mouseleave', function (e) {
if ('INPUT' !== e.target.nodeName) {
// do your stuff
}
});

Detect Hide Keyboard Button on Ipad Iphone in Javascript

I am trying to intercept "Hide keyboard button" specific for Ipad in Javascript. I searched everywhere but could not find correct keycode for that.
I pressed any keys and I get a keycode map (for characters, but also for enter, space and delete..).
This is an example of what I want to accomplish
$( "#mydiv" ).on( "keydown", function( event ) {
if (event.which == xx){
//do something
}
}
where xx is my keycode on 'hide keyboard button'. No method is called to the delegate when the button is pressed nor a KeyCode.
I took a look at detect iPad keyboard Hiding button, but I get a solution on a different level (with Xcode), but I need a solution with Javascript.
Hope someone could help.
I found a workaroud for iPad IOS7. I will test on IOS8 to make sure it works. So basically I create a listener on every FOCUSOUT event (for all my texts) and I call my function.
It fires when you have your keyboard open and when you close your "keyboard". It doesn't fire when you select another text field or button, because it targets on null. If you use in combination with keydown, you can save multiple value and call your submit function only when you release your keyboard.
It works for my specific project.
document.addEventListener('focusout', function(e) {
if (e.relatedTarget === null) {
alert("close keyboard without click on something else");
callYourFunction();
}
});
p.s
I'm pretty new here in SO, so I don't know if I can reply myself or I should edit my question or make a comment.

JQuery UI click event fires twice on keypress

HTML
<button id="clickMe" tabindex=0>Click Me!</button>
JS
$('#clickMe').button();
$('#clickMe').click(function() {
alert('hey');
});
$(document).keypress(function (e) {
var key = e.keyCode ? e.keyCode : e.which;
//detect when the user has hit enter
if (key == 13) {
//click the focused element
$(document.activeElement).click();
}
});
Why does this alert fire twice when you hit tab to focus the button and enter for the keypress event, but only fires once when you click the button with the mouse?
Demonstration
EDIT: tab + enter doesn't work at all in IE 10
Because hitting "Enter" when focus is on a button triggers the "click" event natively. You also get a "keypress" event, and from that you trigger the "click" event again.
I know it's an old post but while I was looking for a solution of a nearly identical problem I've found out that the default type of a <button> element is "submit".
This means that if you press Enter anywhere in the <form> containing this button, it will automatically submit.
Actually, if you press enter in any of those two input, the snippet closes. If you define a function to click a button on the Enter keypress event it will trigger twice unless you add a "button"to the button element, because you trigger it both with your function and the automatic submit.
TLDR:
add type="button" to your button element.
$(document).ready(function(){
$(document).on('click','#submit_type',function(){
console.log($(this).attr('id'))
});
$(document).on('click','#button_type',function(){
console.log($(this).attr('id'))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
<input>
<button id ="submit_type">Can enter</button>
</form>
<form id="form2">
<input>
<button type="button" id="button_type">Cannot enter</button>
</form>
I'm responding here to Pointy's comment instead of in the comments due to lack of space;
I can confirm that I can see the click getting triggered in the JSbin, but I am not sure how to account for the difference between my actual application code's behavior and that on the page. Perhaps it was because I bound my "click" on a separate line instead of chaining it.
I have not yet learned how to use JSBin, but I make a solemn promise to do this soon. However, my info came from experimentation in my own code:
$(settings.selectors.patientSearchSubmitButton).click(validatePatientSearch);
Was followed by
$(settings.selectors.patientSearchSubmitButton).click(alertOnClick);
I also had another binding:
$(settings.selectors.patientSearchParameter).keypress(function (e) {
if (e.which == 13) {//Enter key pressed
validatePatientSearch();
}
});
patientSearchParameter was a field next to the button. When I focused on the field and hit "enter" in chrome, ff, plain IE11, the validatePatientSearch function ran once, and the alertOnClick function did not run. When I did the same thing in IE11 compatibility mode for IE8, 9, 10; the function ran twice, and the alertOnClick was triggered. I am not certain how I could prove it, but this has been my experience, and this was repeated behavior over 20 or so test tries. I am using Windows 7 64 bit. Not sure what else could be causing it to behave this way, but I hope it can be useful to someone.
Could it be because my click was bound to the button and not the field?

How to check whether "File open..." window is open with javascript?

I have an keyup handler. I want something to happen every time I press ESC except when I'm inside a "Choose File..." window.
Here is a jQuery sample code of what I need:
$(document).bind('keyup', function(e) {
if (e.keyCode == 27) {
if (!IsChooseFileDialogBoxOpen())
doSomething();
}
});
How can I do that?
Thanks
You can't do that, per-say. But what might be able to do is switch to use the keydown or keypress events instead of keyup. Then when the user presses ESC with the file dialog open, the keydown event is caught by the dialog and not sent to your JS, so the callback never fires.
Check it out here: http://jsfiddle.net/sHKjb/
I tested this in FF, did not do any further testing for Chrome, IE, etc.

How to find what caused onChange event for select box in IE - keyboard or mouse?

Is there some way to find out what caused the onChange event on select box in Internet Explorer (>= IE8) - keyboard or mouse?
I have a code which doing something when user selecting a value, and this code works great in Firefox and Chrome but not in IE (no surprise, huh). In IE it works fine only if user uses mouse but not a keyboard, because then it fires a onchange event on every keypress (not on Enter as normal browsers).
So, to fix this behavior I need to know if event is fired using a keyboard and then I will filter it.
Update:
Ok, after playing a bit I found a good solution. Posting it here in case someone will find it useful. Solution below using jQuery but it can be done in pure Javascript too.
This is a code which caused a problem:
$("#mySelectBox").change(function () {
// Do something
});
And this is my solution. It's probably not perfect, but it works in my case. And event handlers could be chained in jQuery, of course. The code below stores initial value of the select and uses it to avoid doing something on initial mouse click - when user expands a select box. Also it filters all keypresses except Enter.
function doSomething(el) {
if (el.data["valueOnFocused"] !== el.val()) {
// Do something
}
}
$("#mySelectBox").focusin(function () {
$(this).data["valueOnFocused"] = $(this).val();
});
$("#mySelectBox").keyup(function (e) {
if (e.which === 13)
{
doSomething($(this));
}
});
$("#mySelectBox").click(function () {
doSomething($(this));
});
Basically the onchange event is supposed to be fired when the user makes a selection then leaves the input (be it select, textbox, radio button, whatever). Since this isn't working in IE, you could try using onblur instead, to detect when the user actually leaves the box. At that point you could read which item is selected and act accordingly. This is more of a workaround, but might do what you need.
Edit: another option would be to detect the pressing of the Enter key, like so:
if(e && e.which){ // NN4 specific code
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode // IE specific code
}
The characterCode variable now has the "code" of which button was pressed. If it was the enter key, that code will be 13. You could listen for this.

Categories

Resources