I have a button with an anchor, that I would like to trigger with the spacebar for accessibility reasons. Instead, clicking the spacebar jumps the page down when button is in focus.
Go to Stack Overflow
I have tried eating the spacebar key:
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
but of course this is not what I want. I'm not sure if mapping the spacebar key to the enter key is a smart solution, or if its possible. How can I trigger a button with the spacebar using pure JS?
You might want to look into a prevent default solution:
window.onkeydown = function(event){
if(event.keyCode === 32) {
event.preventDefault();
document.querySelector('a').click(); //This will trigger a click on the first <a> element.
}
};
That will stop the space bar from performing the default action (to send a space) and then you can add your scroll to command below that inside the function.
Give your a link an id and try this:
var link = document.getElementById("link");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
link.click();
}
};
Related
I'm using contenteditable on my website (and JS/JQuery). I have a limit (maxlength) of 160 letters in it. When it comes to 160, function addOnTypeKeyDown() fires (when typing) e.preventDefault(), but this function prevent Ctrl+C, prevent mouse selection, prevent Ctrl+A as long as I click backspace (so e.preventDefault() isn't working).
My question is how can I "switch on" options like above (Ctrl+C and so on...) without letting user type letters.
I know that I can use input or textarea, but I'm asking how can I solve this problem using contenteditable?
I used e.which for Ctrl+C and mouse events, but that didn't work.
Function looks like that:
function addOnTypeKeyDown(event){
var cntMaxLength = parseInt($(this).attr('maxlength'));
event = event || window.event;
if ($(this).text().length >= cntMaxLength) {
if(!(event.which==8))
{
event.preventDefault();
$(this).parent().find("#error").css("display", "block");
}
}
else{
$(this).parent().find("#error").css("display", "none");
}
}
Thanks for your time and effort.
What may be the reason, that event listener of Enter key doesn't work?
I tried both plain JS:
addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
enter(e);
}
});
function enter(e) {
event.preventDefault();
alert("You pressed enter");
}
and jQuery:
$(document).keypress(function(e) {
if(event.which == 13) {
event.preventDefault();
alert('You pressed enter!');
}
});
Also, I tried both event and e. Doesn't work. For another key, for example Backspace it works well.
That is a plugin for our corporate intranet - when you click some letter in email inbox, and after that press Enter, small pop-up window must be shown. But for some reason Enter is ignored in my script - instead of showing pop-up, webpage immediately opens the letter (that is a default behavior).
As I understand, the reason may be in another listener somewhere in webmail interface? Or not? If yes, may I somehow impart higher priority for handling Enter (so, before opening the letter, pop-up will be shown)?
Apologize for long description.
It should work as long as you bind the event handler within the document.ready
$(function(){
$(document).keypress(function(e) {
if(event.which == 13) {
event.preventDefault();
alert('You pressed enter!');
}
});
});
Here is a working sample
I would like to trigger a click if enter is pressed inside an input tag, but would like to have the default event strategy in all other cases. I have tried it this way:
$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
It works, but I am still not satisfied, because when I click inside the input somewhere in the middle of text or press the left button, or home button and then try to type some text, it will show it at the end of the input, which is bad user-experience. Can I keep the input to work in the default way except the case when enter is pressed?
I think what you are looking for is this:
$(document).ready(function () {
$("#test").keyup(function (event) {
if (event.keyCode == 13) {
$("#campus-search").click();
}
});
$("#campus-search").click(function () {
console.log("BUTTON IS CLICKED");
});
});
The input will act completely normal and everything works on default, unless when you press the enter button (keyCode = 13), then the button .click() event will be triggered.
Working Fiddle: http://jsfiddle.net/Mz2g8/3/
————
# Update: Just one hint for the code in your question, do not use charCode, as it is deprecated.
This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
(E.g. charCode does not work with FF v29.0.1)
And something different but important to know:
charCode is never set in the keydown and keyup events. In these cases, keyCode is set instead.
Source: https://developer.mozilla.org/en-US/docs/Web/API/event.charCode
This should work
$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
e.preventDefault(); // prevent default action of the event if the event is keypress of enter key
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
I think you can eliminate the else clause entirely to get your desired result.
Look at this jsfiddle.
The keypress function does not capture non-printing keys, such as shift, esc, delete, and enter, so the best way to go about this would be have two event handlers: one for keypress, as you have defined above, and one for keydown that checks for the charCode 13 and then performs the click() event on $(#campus-search) if that keycode is passed (by an enter press).
Demo
This is what you are looking for:
HTML:
<input id="keywords" type="text" value="" />
<input id="campus-search" type="button" value="Campus Search" />
JavaScript / jQuery:
$("#keywords").keypress(function (e) {
if (e.charCode === 13) {
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
$("#campus-search").on("click", function () {
alert("Searching..");
});
Live Demo
I'm trying get my <a> tag triggered when the user press on the "enter" key. (onkeypress).
my <a> tag:
<a href="javascript:search()" onkeypress="return runScript(event)">
this is my javascript :
function runScript(e)
{
if (e.keyCode == 13) {
alert("dssd");
return false;
}
}
I dont know whats messed up ?
its work for me
Open in new window using javascript
javaScript
window.runScript = function (e) {
if (e.keyCode == 13) {
alert('ss');
return false;
}
else {
return true;
}
}
window.search = function () {
alert('s');
}
live demo : fiddle
Write your html as given below. Note the property tabindex which makes the a tag focusable in certain browsers.
<a id="link" href="http://google.com" onkeydown="runScript(event)" tabindex="1">I am a link</a>
If you need an autofocus on load, you can use the jQuery function focus as shown below.
$(document).ready(
function(e){
$("#link").focus();
}
);
Then your function
function runScript(e){
if(e.keyCode == 13){
alert("pressed enter key");
}
}
you have to call e.preventDefault(); (or return false in some browsers) if you want to prevent the link load the link in href.
function runScript(e){
e.preventDefault();
if(e.keyCode == 13){
alert("pressed enter key");
}
return false;
}
see a demo here:
http://jsfiddle.net/diode/hfJSn/9/show press enter key when the page is loaded
The ENTER key actually triggers the onclick event:
<a href="#" onclick="alert('hello!');">
This means that your search() function inside the href will execute before the onkeypress event.
That works in my browser, though I suspect it's not the way to achieve what you actually want to do... (maybe?)
Number one, you probably don't want it to "return" anything, so you can just do onkeypress="runScript(e)" and it'll run. If that function does return a value, it's not gonna go anywhere...
Number two, it's kinda rare that a keydown event would fire on an anchor (<a>) element, unless of course the user tabs through the other elements 'till it has focus and then presses a key (usually the browser will "highlight" the element that currently has keyboard focus, if it's not just the whole page). Are you wanting your script to run when someone presses enter after typing in a search box or something? if so, you probably want to listen for the event on the search box itself, so add it as that element's onkeydown attribute (for example: <input id="mySearchBox" onkeydown="runScript(e)">) if you just want it to run whenever the user presses enter, regardless of focus or typing text into any particular field, just do as edmastermind29's comment said and add the event listener to the whole document.
Have you tried adding this to your script?
document.onkeypress = runScript;
I have a boxee html application. I can handle all navigation keys on the remote control, except the big back/menu button. This one closes the app - I would like to use it to bring up my app menu instead.
Is there a way to prevent default behavior on this key?
you can trigger your back/menu button since the last api update from boxee. in your js-file where you set your keyboard mode you can catch your back button with:
boxee.onKeyboardKeyBack = function(){
browser.execute( "callYourShowMenuFunction()" );
}
browser.execute() delegates that to your htmlbrowser. now your backbutton should trigger your function in javascript!
remember back button usually should close the app, so don t forget to give your user an logout option ;) otherwise your app won t be published!
Backspace handling
document.body.onkeypress = function (e) {
if (!e)
var e = window.event;
/*backspace*/
if(e.keyCode == 4){
e.preventDefault();
/*Do your thing*/
}
}
On right click
document.onmousedown = function(e) {
if (!e)
var e = window.event;
/*right mouse*/
if (e.which == 3){
e.preventDefault();
/*Do your thing*/
}
}
Good article on similar event management http://www.quirksmode.org/js/events_properties.html
Edit: I'd recommend localising the onmousedown to the objects which you want to trigger the event on.