I'm wondering if there's a way to capture the iPhone's virtual keyboard's done button event, using JavaScript?
Basically, I just want to be able to call a JS function when the user clicks done.
I was unable to track the 'done' button being clicked. It didn't register any clicks or keypresses. I had to addEventListeners for change, focusout and blur using jquery (because the project already was using jquery).
You need to do some kind of this:
$('someElem').focusout(function(e) {
alert("Done key Pressed!!!!")
});
It worked for me, hope it will help you as well.
After searching and trying this solution
basically is say:
document.addEventListener('focusout', e => {});
tested on IPhone 6s
This question is kinda old, but I've found a hacky way recently to make this working.
The problem with the 'blur', 'focusout' events is that they fire even if user just tapped outside the input/textarea, and did not press the 'Done' button, in my case, UI should behave differently depending on what exactly have happened.
So to implement it, I've done the next thing:
After showing the keyboard (the input received the focus), add click handler on the window via the addEventListener function. When user clicks on the window, remember the timestamp of the click in the variable (let's call it lastClick = Date.now())
In the blur event handler, set a timeout for 10-20 ms to allow other events happening. Then, after the timeout, check if the blur event happened in a time difference lower for example than 50-100 ms than the lastClick (basically Date.now() - lastClick < 50). If yes, then consider it as a 'Done' button click and do corresponding logic. Otherwise, this is a regular 'blur' event.
The key here is that tapping on keyboard controls (including Done button) does not trigger the click event on the window. And the only other way to make keyboard hide is basically tap on other element of the page and make the textarea lose focus. So by checking when the event happened, we can estimate whether that's a done button click or just blur event.
The answer by oron tech using an event listener is the only one that works cross platform.
document.getElementById("myID").addEventListener("focusout", blurFunction);
function blurFunction() { // Do whatever you want, such as run another function
const myValue = document.getElementById("myID").value;
myOtherfunction(myValue);
}
"Change" event works fine
document.querySelector('your-input').addEventListener('change',e=>
console.log('Done button was clicked')
);
attach a blur event to the text box in question. The done fire will fire this event.
The done key is the same as the enter key. So you can listen to a keypress event. I'm writing this using jQuery and i use it in coffee script so I'm trying to convert it back to js in my head. Sorry if there is an error.
$('someElem').bind("keypress", function(e){
// enter key code is 13
if(e.which === 13){
console.log("user pressed done");
}
})
Related
Scenario:
I have a RadCombobox and I have attached functions to most of the events.
One event of the combobox is OnClientBlur and I am using this to check whether value in Combo is "Unassigned" or not. If it is "Unassigned" I need to cancel the onblur event and keep the focus on to the same combo.
This is the javascript which I has been used to cancel the event.
if (sender.get_text() === "Unassigned") {
eventArgs.get_domEvent().preventDefault();
return false;
}
Problem:
When the user tabs out first time of the ComboBox the event gets cancelled and the focus stays on the same combo box (in this case it is the 3rd Combo).
But when the user hits the tab button again the focus moves to the next control.
When I debugged the code I found that when the user first hits the tab button, following line works
eventArgs.get_domEvent().preventDefault();
I can see the preventDefault function, see following snapshot.
but when the user hits the tab button again I get an error and cannot see preventDefault function, see following snapshot
I am not able to understand what is going wrong here. Anyhelp would be appreciated.
Your problem, revolves around the difference between MouseEvents and KeyEvents. And also the way Telerik implement the OnClientBlur event. As far as it doesn't point to a specific type of browser event, each time it gets triggered
As you see in the first snapshot you got clientX and clientY, which means your OnClientBlur derived from a MouseEvent.
Whereas in the second one you got altKey, altLeft, and also there is no button property, which means that this one is a KeyEvent.
The other point here is as you have these fields in the output:
e.bookmarks
e.behaviorPart
e.behaviorCookie
Means you are using one of the old versions of IE4+ to IE7 or IE8, which they have cancelBubble instead of preventDefault.
Sometimes events are not cancelable, and using event.cancelable you can make sure if the current event is cancelable or not.
At the end to fix you code you can simply do this:
if (sender.get_text() === "Unassigned") {
var domEvent = eventArgs.get_domEvent();
if(domEvent.cancelable){
if(typeof(domEvent.preventDefault)==="function")
domEvent.preventDefault();
else
domEvent.cancelBubble = true;
return false;
}
else{
//you can not cancel the event, do something else to make it manageable
}
}
From the image, is it possible to identify the iOS 'Done' button click event using javascript/jQuery? The iOS keyboard click events can identify using 'onkeypress' function for the text-area.
If that field is part of the form, Done will trigger "onsubmit" event of the form.
One approach is to set a timeout, which occurs on every form element's onblur (which is dispatched) and is cleared on every element's onfocus.
Brief example in jQuery as an explanation:
var blurOccurred;
$("input")
.on("blur", function(evt) {
blurOccurred = window.setTimeout(function() {
alert('Done button clicked');
}, 10);
})
.on("focus", function(evt) {
window.clearTimeout(blurOccurred);
});
By doing this, clicking "done" is detected with 10ms delay. And if it's just navigating to prev / next form field, whole timeout won't be executed.
I'll hope this get you started.
Edit: on iOS7 there is event.relatedTarget property, which is null when "done" is clicked - otherwise it's the input element where the focus is set on. Also this can be used for detecting whether done is clicked (or keyboard is closed).
I am wondering if mouseenter and click event can exist together and they can both exist to TRUE when checked with:
if ((evt.type === 'mouseenter') && (evt.type === 'click'))
It is because when I mouse over the link, the mouseenter triggers (set to TRUE) and even when I clicked on it, the hover is still shown. Probably they could exist together but I'm no expert on this.
If someone can give insights, I would appreciate it a lot.
Also how can I trigger the click event during the mouseenter event?
The mouseenter event fires when the mouse enters the control. The click event fires when the mouse is clicked. They are two separate events which call two separate event handlers. If you click just as the mouse enters the element they will be called within a short timespan of one another but they are still two distinct events.
It is also important that you differentiate between the mouseenter and the mouseover events. mouseenter fires when the mouse physically enters an element, whereas mouseover fires continually while the mouse remains over an element.
While you cannot trigger the click event per se, you can call the same function that is called by the click event handler. For example if you have this:
var myfunc = function (e) { ... }
document.getElementById("id").onclick = myfunc;
Then you could simply call myfunc directly and you would get the same result as if the mouse was clicked.
They can 100% exist together, and this is a great question with no good answer... When you're on a mobile device, a mouseenter event will be thrown on tap... If you are also detecting onclick as well as mouseenter, then there will be a discrepancy between mobile devices and desktop machines.
It's kind of hard to solve such a small issue at the moment.
const x = document.getElementById('some_node')
x.onclick=(e)=>{
e.stopPropagation()
// this logic will be triggered on click for both desktop and mobile
}
x.onmouseenter=(e)=>{
e.stopPropagation()
// this logic will be triggered on click for mobile only (but will
//have already been triggered on desktop when cursor entered node)
}
The only workaround I came up for this, and I think it's pretty clever, is using a eventlistener for taps/touches. The order/priority that these events are fired goes: touch > mouseenter > click.
Since the touch event is fired first, you can add a touch event listener (which will only register on a mobile device), and change a variable that prevents the mouseenter event from being triggered (which is the logic that would generally be conflicting with the onclick logic)... like this:
let isMobile = false
x.addEventListener('touchstart',(e)=>{
isMobile = true
}, false);
Then your mouseenter would need to look like this:
x.onmouseenter=(e)=>{
e.stopPropagation()
if(!isMobile){
// this logic will no longer cause a conflict between desktop and mobile
}
}
they can exist on the same object, think a button with a hover state and then a click action. The click event, though will only read the click event since the enter event actually occurred earlier.
You can create a var like mouseIsOverand set it to true when the enter event fires. I can be safely assumed, though that if a click happens the mouse is over the same target.
The two events may happen at the same time, but they will still be processed on after the other. So the if you posted will never evaluate to true.
If you look at your code again you can see that it doesn't make sense. How can something be X and Y at the same time? It can't.
for the first question i think u got an answer....
however, for Also how can I trigger the click event during the mouseenter event?
u can use trigger() function..
http://jsfiddle.net/PDhBW/2/
if u want to read more about trigger
here is the link
http://api.jquery.com/trigger/
With Jquery event delegation, You can use binding multiple events at once
$('#IdElement').on('mouseenter click', function () {
//Your Code
});
http://jqfundamentals.com/chapter/events
I am trying to create to popup div when pressing enter key, while the div contains a button (that I script to focus when it fired up) that will close the div when you press enter again. I receive the enter key from binding keypress and keydown, end up having different results.
Binding 'keypress'
Things work properly, with first enter key fires up a popup box and another enter key to dismiss the popup box.
Refer this JSFiddle.
Binding 'keydown'
This doesn't work correctly, as it fires up and dismiss the popup box immediately (which you won't see) with only one enter key.
Refer this JSFiddle.
My question is why would keydown generate odd behavior, it is like firing enter key twice for me, but the truth it wasn't. If I remove the button focus(), it will works correctly. That's puzzled me.
Tested with firefox and chrome.
You're rebinding the click event every single time the popup opens, so each time you click the close button it'll fire it multiple times which will cause unexpected behaviour.
Eg:
var Popup = function(){
$('#ok-button').live('click',function(){
$('#popup').remove();
});
};
This code means every time you create a new Popup instance, every single $('#ok-button') that exists will have another click event bound to it.
As for the reason why it immediately closes when you use keydown vs keypress, that's due to the fact that the moment the popup is opened you've set the focus to the button.
The two key events work differently (firing at slightly different times during the key process). It appears that with keydown, you're changing the focus in the middle of the actual action (pressing the button on the keyboard) which then continues and triggers the focused click.
Removing the focus stops the weird double trigger behaviour because you're no longer binding another click event.
I'd suggest changing your click event:
$('#ok-button').live('click', function(){
$('#popup').remove();
});
var Popup = function(){
// Whatever
};
I'd also suggest looking at jQuery's on event instead of using live.
I have a <select id="myselect" name="myselect" onChange="(myfunction();)">...</select> which works perfect in IE and Opera. The word "perfect" means the event fired when you change the values from the drop-list by mouse or by any of "Up", "Down", "PageUp"(not for Opera), "PageDown"(not for Opera), "Home" and "End" keys when select menu is active (blue). The problem appears when you test it using Firefox, 3.6.Xv. Nothing happens when you use "Up" and "Down", but for mouse it still works.
Do you recommend to use onkeyup event? I've tried it, it "catches" up and down, but, IE appears to have both onChange and onkeyup event. But I need just one event.
How do people solve this issue?
Thank you.
I recommend that you keep using the change event. The Firefox implementation makes lots of sense for keyboard users. If you tab to the select element and choose an entry using Up and Down keys (and you have to press them a lot for a lengthy list) you don't want to trigger tons of actions on the web page. It is ok to have the action executed once you've selected the correct entry and moved on to something else.
This is a pretty dirty hack, but you can force the the change event to fire by doing this:
element.addEventListener('keyup', function(evt){
evt.target.blur();
evt.target.focus();
}, false);
So you'd register an event listener for change as well, and that function would get called when the user presses a key on the <select> via the code above.
You may want to scope this only to Firefox, but AFAIK you'd have to use UA sniffing for that so it's up to you if that's acceptable.
Source
You could be clever and make your own handler for the keyup event which tests the keycode to see if it was an up arrow or down arrow, and fires the change event accordingly.
My own js isn't good enough to write you an example but I could show some example jQuery to do that:
$('yourSelect').keyup(function(e)
{
if (e.keyCode===38)
{
//this is an up arrow press
//trigger the change event
$('yourSelect').change();
}
else if (e.keyCode===40)
{
//down arrow has pressed
//trigger the change event
$('yourSelect').change();
}
});