I am trying to write a web page that can catch onkeyup events.
It uses document.write("..."); to print the keycode each time.
However it only works once, the second time I use it, the window does not update.
Here is the code:
document.onkeyup = function checkKeys(event) {
var keyCode = event.which || event.keyCode;
document.write(keyCode);
};
Why does this only catch the event once?
Don't use document.write(). It's wiping the page clean, along with the onkeyup handler. Create an element on the page and update the element's contents.
document.onkeyup = function checkKeys(event) {
var keyCode = event.which || event.keyCode;
document.getElementById( 'results' ).innerText = keyCode;
};
HTML:
<div id="results"></div>
document.write(keyCode); is overwriting the page each time with the new keycode, you need to append to the document, preferably a div on the page:
<div id="keyupDiv"></div>
document.getElementById("keyupDiv").innerHTML += keyCode;
Related
I have an HTML page that is partially generated by a 3rd party that I cannot change. However, I can add my own Javascript to the page to modify it's behavior.
I want to remove a keypress event listener from an input textbox.
In Chrome dev tools, if I view the element, I can see the following two events tied to a keypress:
I added the second event listener with the following code:
$('#signInName').keypress(function (e) {
var key = e.which;
if(key == 13 && $('.sendCode').css('display') != 'none')
{
$('.sendCode').trigger('click');
return false;
}
});
I want to remove the first listener in the image. If I click the 'remove' button in dev tools I can confirm that I get the functionality I want, which is to click a different button when I press ENTER, than what the 3rd party has set to fire.
I can see that I can get access to the events using this jquery:
> $('#signInName').keypress.length
< 2
But, I am very limited in my JQuery or javascript experience, and I want to remove the event listener as mentioned.
How can I reference and remove this other event listener preferably using a static identifier and without using the exact index of 0 in the collection, which might change?
Name the function:
signInNameKeypressHandler = e => {
var key = e.which;
if(key == 13 && $('.sendCode').css('display') != 'none')
{
$('.sendCode').trigger('click');
return false;
}
}
$('#signInName').keypress(signInNameKeypressHandler);
//later
$('#signInName').off('keypress', signInNameKeypressHandler);
You can use remove removeAttr for removing first event listener before defining your event listener.
$("#signInName").off("keypress");
$('#signInName').keypress(function (e) {
var key = e.which;
if(key == 13 && $('.sendCode').css('display') != 'none')
{
$('.sendCode').trigger('click');
return false;
}
});
I am trying to be able to have some text display and when you have read it you can press any key the text will be replaced with new text. Can somebody help?Thanks!
Yes you can use the keydown event by attaching it to the document [DOM]
Something like this :
document.onkeydown = function(evt) {
evt = evt || window.event;
alert(evt.keyCode); // this will give you the code of key which was pressed
//myFunction()
//You can also call your custom function here
};
https://developer.mozilla.org/en-US/docs/Web/Events/keydown
What am I missing in order to translate my jQuery onClick events into keypress events where a user can use a keypad?
The specific example is for a calculator. Using jQuery and the on click/touch events work perfect. However, when I try to introduce keyCodes I am not getting the results I think I should.
Here is my example code;
$(document).keypress(function(event){
var display = "0";
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode === 13){
alert(keycode + " = ENTER");
calcDisplay(total(), true);
}
});
Most of this I picked up from other successful solutions to similar issues. So the way I understand it is; if someone presses "enter" on the keyboard, I'd get my alert and then process my answer.
The jQuery version of this that works for me looks like this;
$(".button").on("click touch", function(){
var button = $(this).data("value");
if(button === "="){
calcDisplay(total(), true);
}
superNewb to JS here so much love ahead of time if this is something super foolish on my end.
keypress is meant to be used when characters are being inserted as input. keydown is meant to be used to detect any key.
quirksmode has a nice little write-up about the differences.
Instead of $(document).keypress use $(document).keydown.
Additionally, jQuery normalizes event.which, so instead of:
var keycode = (event.keyCode ? event.keyCode : event.which);
you can use
var key = e.which;
function initKeys() {
$(document).bind("keydown", "U", LoadPlayer);
}
window.onload = initKeys;
I want to execute the function 'LoadPlayer' on pressing the u key.
What I'm getting is that for any pressed key the 'LoadPlayer' is executed.
The HotKeys library is added like this:
<script language="javascript" type="text/javascript" src="./libraries/jquery.hotkeys.js"></script>
But it cannot be found. I've putted it in the exact same place as other libraries. No problem with other ones
What am I doing wrong?
Try this, it should work.
It checks the key pressed in an anonymous function (so that you can add as many hotkeys as you need).
$(document).ready(function(){
$(document).bind("keydown", function(e){
e = e || window.event;
var charCode = e.which || e.keyCode;
if(charCode == 85) LoadPlayer();
});
});
Demo: http://jsfiddle.net/HULgw/
(click in the result block after running to make the keydown event listened :) )
You're binding the keydown event on all keys. that "U" is the parameter you will pass to the handler, loadPlayer (q.v http://api.jquery.com/bind/). Instead bind keydown directly, and filter inside it on the keycode.
Try deleting ./ from your javascript src path. Also check file permissions on your hotkeys library.
<script type="text/javascript">
$(function() {
$("#resizable").resizable().draggable();
$('#resizable').append('<iframe id="rte" width="100%" height="100%" ></iframe>');
myeditor = document.getElementById("rte").contentWindow.document;
myeditor.designMode = "on";
$('#rte').bind('keypress', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
alert(code);
return false;
});
});
</script>
In the script above i create an iframe and set it to design mode. now i need to know which keys where pressed, so i bind a keypress event to iframe. but that doesnt work :(
is there a way to do it?
You can use contents() to get to the iframe document, and jQuery also normalizes the which property of keypress events, so there's no need to examine the keyCode property:
$('#rte').contents().keypress(function(e) {
alert(e.which);
return false;
});
to avoid browser security issues, try making the iframe src a real (but empty) page, and do the keypress code inside the iframe page, but have the function calling out to its parent.