Develop Reference

JavaScript keyup eventlistener does not work on iPhone

I have several events that use keyup, but they do not fire on iOS in safari. Is there another event listener that can accomplish similar actions?
Example of keyup I use to detect when someone is typing in a searchbox
document.getElementById('user_search_select').addEventListener("keyup", e=>{livebox(usersearch_counter=0)});

Answer here: document.getElementById('user_search_select').addEventListener("input", e=>{livebox(usersearch_counter=0)});

angular 2, how to write custom mousedown/touchstart implementation

I need to support both, mouse and touch events, so I have code like this
<button
(touchstart)="doSomething($event)"
(mousedown)="doSomething($event)">
Is there some way to merge both into one ? I also noticed that touch devices trigger mouse events, so I need a better solution. Is it possible, for example, to write an event listener, something like this
<button (pointerDown)="doSomething">...</button>
And in my PointerDown event class I listen to both events ? This would be nice :)
I also found ng2-events library, not sure if it will do what I need.
Any help would be appreciated!

You can do all that using attribute directive and #HostListener. Dont have everything in my head but you'll understand once you look into it

trigger.io - hide a html element on touch/tap event

The problem seems simple enough yet it is not working.
What I want is a div to hide on tap. I currently am using jQuery but if anyone know have to do this in a more native manner id love to do that!
I have tried using this but it did not work
$(".event_image").on('tap', function(e) {
$(this).hide()
});
anyone got any ideas?

jQuery doesn't have anything for touch/tap events, but you can easily build your own by using these:
touchstart
touchmove
touchend
touchcancel
More information available here.
or you can use a plugin such as hammer.js which supports touch events & much more!

Could you just do a click event? They're basically the same.
$(".event_image").on('click', function() {
$(this).toggle();
});

Ghostclicks in mobile apps

There is a lot of material/posts on ghost clicks and I'm trying to understand it better. So the way I understand it, the reason for ghost clicks is the click event being dispatched ~300ms after the touch event. jQuery Mobile suggests to not use their vclick event whenever there is any chance of changing the content underneath the finger position.
My first question would be: Does that mean ghost clicks will only fire if the element targeted by click is different from the one originally touched? So, say, I write a database entry when a button is touched – nothing else. Is there a chance of ghost clicking or not?
If this is the case, wouldn't that mean that I can prevent ghost clicks altogether if I simply use only tap events and no click events whatsoever?
My last question would be if I can simply tell the browser to not use the 300ms delay when using PhoneGap (which would instantly solve the problem), but I'd just guess that I can't do that as it's probably hard-coded into the browser.

The click event is delayed by 300 ms to detect things like double tap or fat finger mistakes.
Yes, wherever possible you should use the touch events instead.
Yes, there are many ways to enable fast clicks by doing a bit of JS. For instance:
https://developers.google.com/mobile/articles/fast_buttons
https://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile
http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/
You don't have to live with the 300ms delay.

If everything on your page that can be clicked has the appropriate vclick jQuery event handlers installed, then one easy way of stopping ghost clicks is create a touchend event handler on the body and call preventDefault from it:
$(document.body).on('touchend', null, function(e) {
e.preventDefault();
});
Note that this will disable regular clicks from touches, so any conventional links or form inputs you have will stop working unless you add vclick handlers to them.

Javascript Touch Object

I am trying to differentiate a click from a swipe in Javascript using touch events. I would like to know, is there a property in the touch event object that can be inspected to determine the difference on a 'touchend' event, or do you have to listen for both a touchstart or touchend AND a touchmove event? I am trying to minimise the number of event listeners I have to add to the DOM and am wondering if it is possible to do this by observing a single event? Specifically I am looking at webkit on iOS.

Don't bind to the click event at all. It responds much slower than the collection of touch events.
To check for a swipe, you need to listen for the touchstart and touchend events. Don't worry about touchmove unless you're planning on doing something when that event fires.
On the touchstart event, you will need to record the x/y position of the event. On the touchend event, do the same again. What you'll also need is some kind of threshold value, so that when you calculate the difference between x1-x2 and y1-y2 you can determine if it was a swipe or not.
Apple gives a meta-algorithm that involves touchmove here http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html. Search on that page for "identify a swipe" and you'll find it.
I personally have never needed to use touchmove and successfully have used the technique I described above. However, either is a valid approach so you should investigate what works best for you.