Develop Reference

adding the keyboard events using the addEcent Listener

i am using el-pagination by element UI and i want to the #keyup.enter & #keyup#space events to it, right now we do not have any kind of key event to it
i am trying to create an addeventlistenber but i am not sure how it should work, i added some code but that does not seems to be working, if anyone has an idea how to fix it, please share
here is my try
document.querySelector('.el-pagination').addEventListener('#key.enter',function(e) {
what should i write here i am have no clue,
});
should i write it on the el-input element inside the el-pagination or where exactly

There is nothing like #key.enter in javascript. You can use either keyup or keydown event listener for .el-pagination.
After that you have to check for event key, whether it is "Enter", "Space" etc. You can this by .key method.
document.querySelector('.el-pagination').addEventListener('keyup', function(e) {
if(e.key === "Enter" || e.key === "Space") {
//Your code here
}
});

iOS 9 - keyup event not firing

Is anybody else having problems with the keyup event in iOS 9 not firing?
Just a simple test bed replicates the issue for me.
<input id="txtInput" />
Vanilla JS:
document.getElementById('txtInput').onkeyup = function () {
console.log('keyup triggered');
}
jQuery:
$('#txtInput').on('keyup', function () {
console.log('keyup triggered');
});
Neither fire...

I suggest using the keypress event on browsers with touch screens. I know that you can't really detect touch screen screens, though, so it leaves you with a few options that your situation will likely dictate.
Attach both events keyup and keypress. This would likely be dependent on how much processing is going on and if you are getting double-fires in some browsers.
Attempt to determine whether the browser is a touch screen (like using Modernizr), and then attach a fallback handler like change.
Either way, you end up with two event listeners.

$('#yourid').bind('keypress', function(e) {
// This will work
});

It's not pretty, but a work around is to bind to keydown to capture which key has been pressed, and input if you want to obtain the value, including the key typed:
(function () {
var keyCode;
$('#txtInput')
.on('keydown', function (e) {
// value not updated yet
keyCode = e.keyCode;
// Enter key does not trigger 'input' events; manually trigger it
if (e.keyCode === 13) $(this).trigger('input');
})
.on('input', function (e) {
console.log(keyCode, this.value);
});
}());
If you type 'a' the following occurs:
keydown fires.
e.keyCode is set to the ASCII value of the key pressed.
this.value is '' (i.e. the same before 'a' has been typed).
input fires.
e.keyCode is undefined.
this.value is 'a'.
You can also manually trigger an input event if the enter (13) key is pressed; input isn't fired by this key by default.

HTML5 - Android - get key pressed

I am running Android 4.4.2 and it does not seem to fire the 'keypress' event.
Just some basic code I have now for testing is purposes:
$('<input>')
.on('keyup', function (e) {
e.preventDefault();
console.log(e.which);
})
.on('keypress', function (e) {
e.preventDefault();
console.log(e.which); // never fired
})
.on('keyup', function () {
console.log(e.which);
});
Yet the 'keyup' and 'keydown' event does not give an accurate code for the actual key pressed.
Is there a method (either JavaScript or jQuery) which I can use to get the actual key pressed in Android?
Thanks.

I think it's because of the spell check because the events only fire after a space or enter on android. Maybe find away to turn off spell check or scan the text field manually by focusing on a hidden text box maybe? I'm working on it when I wake up tomorrow.

IE onpropertychange event doesn't fire

select
<input type="file" id="real-file-input" style="display:none" />
$('#select-handler').click(function(){
$('#real-file-input').click();
});
$('#real-file-input').bind('propertychange', function(){
alert('changed');
});
it's weird that when I use .click() the propertychange won't be fired.

Actually your code works fine in IE7 and 8 for me, whenever I change a value of input type ='file', the alert is fired. Whereas it is not working in >IE9 versions.
From paulbakaus's blog on propertychange on Internet Explorer 9
What’s wrong with propertychange on IE9?
IE9 doesn’t fire non-standard events when binding them through
addEventListener. Every modern JS library that uses feature
detection, including jQuery, will fail (see also:
http://bugs.jquery.com/ticket/8485). “Not a biggie” you say, “simply
use attachEvent directly” you say?
The good news: propertychange fires when using attachEvent. The bad
news: It refuses to fire when modifying any CSS properties on the
element that are unknown to the engine.. “Well this sucks,” you say,
“but I read you can use DOMAttrModified on IE9!” you say?
DOMAttrModified features exactly the same behavior. It does not fire
for unknown CSS properties. This is a complete disaster.
Many developers faces the same weird behavior.
Why do you want to use onpropertychange which is supported only by Internet Explorer?
I would rather move on to change event handler
$('#real-file-input').bind('change', function(){
alert('changed');
});
or if it is a HTML5 then input event handler.
$('#real-file-input').bind('input', function(){
alert('changed');
});

Unfortunately, IE9 doesn't support the "input propertychange" event on deleting. Escape, Delete and Backspace can be easily captured using the "keyup" event with event.which, but the selection of a text and deleting through right click -> delete does not fire the events propertychange, change, select or keyup/keydown.
I found no solution so far for this problem.
here's my code:
$('#search_input').on("propertychange input", function(event){
console.log('propertychange event');
// trigger search
});
$('#search_input').on("keyup", function(event){
console.log('keyup event', event.which);
if(event.which === 27) { // on ESC empty value and clear search
$(this).val('');
// trigger search
} else if(event.which === 8 || event.which === 46) { // trigger search on Backspace
// trigger search
}
});
$('#search_input').on("change input", function(event){
console.log('change event');
// trigger search
});
$('#search_input').on("select input", function(event){
console.log('select event');
// trigger search
});

How to trigger click on keypress with jquery

I need to trigger click on some keypress action, also if it's a up or down key on my keybord script will be removing some class from specify element. So keypress is working but trigger and up down press not, this is my code, ths for help.
$('.main_search_field').keypress(function(evt){
$('.live_search_plugin').addClass('visible');
var scroll_pane = $('.scroll-pane');
scroll_pane.click();
scroll_pane.trigger('click');
if (evt.keyCode == 40) {
$('.live_search_list ul li').removeClass('active');
}
});

You can try following code:
var e = jQuery.Event("keypress");
e.which = 50;
$(".main_search_field").trigger(e);
In e.which put code for required character.

You have to check for the evt keypress like so:
if (evt.which == 40) { }
When using keypress, usually I check for which key I want to interact with before running any code inside my function. If you don't do this, your code will run with any keypress.

.keypress() might not be your best solution here, you could be better off using keydown() and keyup(), or to use the full version: .bind('keydown', handler) (ditto for keyup)
From the jquery docs:
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
http://api.jquery.com/keypress/
.click() is shorthand for .trigger("click") and you are using it fine, but do you actually have a click handler on $('.scroll-pane)?
Your code will (assuming browser dependencies) cause two clicks to be triggerred on $('.scroll-pane') and then the if() to be evaluated. But you haven't shown us your click handler for scroll-pane so we can't see if that's at fault.