I have to call a method when "enter" key is pressed anywhere in page but i don't want register any method call in each text box. I know it can be done by jQuery like this
$(document).keypress(function(e) {
if(e.which == 13) {
// enter pressed
}
});
Kindly tell me how can I write same version of this code in plain javascript?
Thanks in advance
Please try this
document.onkeypress = function (e) {
if (e.keyCode == 13) {
alert('cilcked')
}
}
DEMO
document.addEventListener("keydown", yourKeyDownFunction, false);
http://jsfiddle.net/9ZDxw/1/
Related
I know how to trigger a function with a textbox:
<input onkeyup="if (event.keyCode == 13) check(this)" type="text">
But what if I'm not focused on any textboxes, but I still need to call a js function with a space button for example?
Particular context:
I'm trying to write an interactive test, and I want users to be able to switch to the next question not only with the button on the page:
<button id="nextButton" onclick="nextQuestion()">Next</button>
but also with a space button, so they can change questions more quickly. To arrange that, I need to call the nextQuestion() function everytime a user presses space on a keyboard.
Try binding the event to the window
window.onkeyup = function(event){
if (event.keyCode== 32) nextQuestion()
}
With jquery you can do something like
$(window).keypress(function(e) {
if (e.keyCode == 32 || e.keyCode == 0) {
nextQuestion()
}
});
or if you prefer vanilla javascript i recommend
window.addEventListener("keyup", keyPressed(e));
function keyPressed(e) {
if(e.keyCode == 32) nextQuestion();
}
can call keyup on body tag or window object
$("body").keyup(function(event){
alert("KeyCode is : " + event.keyCode);
if(e.keyCode == 32){ nextQuestion()}
});
I need to update $scope.CtrlKeypressed value if user pressed alt key it is set to try if he release alt key then ift will be set false but I am stuck here on release. It is not working i am using following code. I unable to do this with angular then I code jQuery code for it but this is also not working
document.body.addEventListener('keydown', function (e) {
if (e.keyCode==18)
{
alert("Keydown")
$scope.ISCtrlPressed = true;
$scope.$apply();
}
});
document.body.addEventListener('keyup', function (e) {
$scope.ISCtrlPressed = false;
$scope.$apply();
});
Can someone guide me how I need to work for this?
Look at this codepen with your code modified. You will get into console the I was pressed message as long as you keep the key pressed and receive an alert when release the key. It also depends on your operating system and how you have configured the keyboard(number of repetitions if kept pressed).
http://codepen.io/TunderScripts/pen/YpxWLR?editors=0011#0
document.body.addEventListener('keydown', function(e) {
if (e.keyCode == 18) {
console.log('I was pressed');
}
});
document.body.addEventListener('keyup', function(e) {
alert('aaaa come back')
});
<script>
document.body.addEventListener('keydown', function (evt) {
if (evt.keyCode == 18)
{
alert("Keydown");
alert("Keyup");
}
});
</script>
I'm using select2 to present an editable selectbox. When user writes a statement which does not appear in the list(select2, data), I show a button to add this statement to the list.
Forcing users to click the button seems to me a little bit frustration. Is it possible to capture enter key in select2? I want to make user able to add his/her new statements into the list just by pressing enter key.
$('select2-search-field > input.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
addToList($(this).val());
});
I'm using Select2 4.0.3 and this works form me:
$(document).on('keyup', '.select2-search__field', function (e) {
if (e.which === 13) {
alert('Pressed enter!');
}
});
I am using Select2 4.0. This works for me;
$('.select2-search__field').on('keyup', function (e) {
if (e.keyCode === 13)
{
alert('Enter key');
}
});
None of these worked in Select2 4.0.6-rc1, but this did:
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
It's detailed in the manual here.
This code can help you with class-based selections:
$('.select2-selection').on('keyup', function(e) {
var YOUR_SELECT2_CUSTOM_CLASS = $(this).attr('aria-labelledby').includes('YOUR_SELECT2_CUSTOM_CLASS')
if (YOUR_SELECT2_CUSTOM_CLASS && e.keyCode === 13) {
alert($(".YOUR_SELECT2_CUSTOM_CLASS").val())
}
});
Or you can use this:
$("YOUR_CUSTOM_CLASS").bind("change keypress", function() {
if (window.event.keyCode === 13) {
alert("Enter Captured")
}
})
If legacy select2 is used (some 3.5.4), then this option can be used:
$('#mySelect2').on('select2-selected', function (e) {
console.log(e.params);
// keypress enter script
});
It helped me a lot.
If you have two select2s on the page, then this is a great option!
I would like to simulate the user pressing tab then enter when they press enter. I know this sounds bad, but I have an asp.net web application that will only allow me to have one form with runat="server" on it so when the user hits return the main form gets submitted. I have another textbox on the page though (that ideally should have it's own form but can't because it is asp), and when enter is hit from there obviously the main form is submitted. The simplest way I could think is to simulate tab then enter using javascript, but I have been unsuccessful in that. I am welcome to any other solutions to this problem. So far I have simulated pressing tab, but I don't know how to simulate more than one keypress though.
Here is the code I have so far, I imagine return 9; needs to be replaced with something else. JQuery will also do.
function suppressEnter (e) {
var keyPressed;
if (window.event) { keyPressed = window.event.keyCode } // IE
else if (e) { keyPressed = e.which }; // Netscape
if (keyPressed == 13) {
return 9;
}
else {
return true;
}
}
EDIT: return 9 + 13; works in chrome, but not IE
Something like this would work:
function keyPress(e) {
if (e.which == 13) {
$(document).trigger(jQuery.Event('keydown', {which: 9}));
// do something
alert('Enter')
}
if (e.which == 9) {
// do something
alert('Tab');
}
};
$(document).bind("keydown", keyPress);
I've coded it up in a fiddle - http://jsfiddle.net/FAe6U/
Also With regards to #nnnnnn comment:
It seems to me you should just code that directly rather than trying
to simulate keystrokes.
Try this:
var tabPress;
function keyPress(e) {
if (e.which == 13) {
if (tabPress == 1){
e.preventDefault();
alert('tab and enter');
}
else{e.preventDefault(); alert('enter')}
}
else if (e.which == 9) {
e.preventDefault();
tabPress = 1;
};
};
function keyRelease(){tabPress = 0;}
$(document).bind("keydown", keyPress);
$(document).bind("keyup", keyRelease);
I've coded it up in a fiddle - http://jsfiddle.net/f4Ybn/
How to overwrite or remove key events, that is on a website? I'm writing a script for GreaseMonkey and I want to make event on Enter button, but when I press the ENTER button, it triggers function on website.
EDIT 1: Here is the website, that I need to do this http://lockerz.com/auth/express_signup
One of these two should do it for you. I used the first one, although someone on SO told me the second one will work also. I went for the hammer.
Sorry, first one wasn't a cut and paste answer. I use using it to return up/down arrow control on a website. I changed it so that it identifies keycode 13 instead.
(function() {
function keykiller(event) {
if (event.keyCode == 13 )
{
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
window.addEventListener('keypress', keykiller, true);
window.addEventListener('keydown', keykiller, true);
})();
Searching quickly on SO:
jQuery Event Keypress: Which key was pressed?
Code from there:
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
Without a library, use: http://jsfiddle.net/4FBJV/1/.
document.addEventListener('keypress', function(e) {
if(e.keyCode === 13) {
alert('Enter pressed');
return false;
}
});