which key was pressed on iframe in design mode - javascript

<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.

Related

Is it possible to defer copying data to clipboard at printscreen event?

I need to hide HTML element on a page when someone press the key Printscreen so that the element not to be visible for capturing and not be copied to clipboard.
If I use the way like
document.addEventListener('keyup', (e) => {
let charCode = e.keyCode || e.which;
if(charCode == 44) {
document.querySelector('my-element').style.display = 'none';
}
});
the element is still visible at the printscreen event
Maybe there is a way how to defer the copying data to clipboard so that the element can be hidden before the copying via printscreen?

JavaScript: Capturing Onkeyup event only works one time

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;

JS bind a keyboard shortcut to a function

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.

keydown event for form or div in html

I am displaying a form inside a div tag as a dialog to enter details.
In this form, I want to handle the ESC key using jQuery.
If any input tags have focus, keydown event will trigger. If the focus is on the form but not on any input tags then it will not trigger keydown event.
Here is my code:
$("#NewTicket").keydown(function(e) {
var unicode = e.keyCode ? e.keyCode : e.charCode
if (unicode == 27)
{
if (confirm("Are you sure you want to cancel?"))
return true
else
return false
}
});
Just add an id,class to the form
<form id="form">
....
and now do this :
$("#NewTicket,#form").keydown(function(e)
{
var unicode=e.keyCode? e.keyCode : e.charCode
if(unicode == 27)
{
if (confirm("Are you sure you want to cancel?"))
return true
else
return false
}
)};
This should work
You can't focus on forms. If you wan't to handle keydown on elements that don't get focus (such as divs or forms) you have to bind it to the document.
Turns out that jQuery automatically adds :focus selector which enables you to find the focused element by using $(':focus')
I believe that if you put your form in an element made focusable using tabIndex, like , or this focusable div is the container element inside the form, then you can bind the keyDown to this div instead. It works cross browser as far as I've tested but I've not seen this solution discussed much, so curious as to anyone's comments about this.
I know this is an old question but someone still might be looking for an answer.
Usually, I do capture key down at global level then forward it to a function and handle it there. For your needs, you can get nodeName. (Tested in FF, Chrome)
$(document).keydown((e)=>{//Capture Key
if(["INPUT","TEXTAREA"].indexOf(e.target.nodeName)!==-1){//If input in focus
console.log("INPUT FOCUSED",e.code,e.keyCode);
if(e.keyCode==27 || e.code=="Escape"){//Capture Escape key
console.log('ESC');
}
}
});

Disable Internet Explorer shortcut keys

EDIT: After waited a while and didn't get anything yet, I've decided
to do shortcut disable thingy only for
IE now. Is there a possibility to disable
IE shortcut keys to access menus/print
etc. via vbscript?
Is it possible to disable browser shortkeys?
Because many of them are using in application. For instance, Ctrl+p is using and I don't want browser to popup the print window.
Yes, you can listen for the various key combinations with javascript and disable the default behaviors. There's even a library that you can use and test here. I just tested it using google chrome and firefox in their demo textarea, and it works as you want.
shortcut.add("Ctrl+P",function() {
return;
});
This works in the browsers that I listed above, but IE will not allow you to override the default behavior in some cases.
Your only option in IE is to disable the Ctrl key entirely with something like:
document.onkeydown = function () {
if (event.keyCode == 17) alert('Ctrl Key is disabled');
};
Which is not ideal and probably not what you want, but it will work.
You can try creating an event handler for keydown event, check on the keyCode and prevent its default action if needed. However this will not work in all browsers.
An example for Firefox (canceling "Print" short key, verified):
document.addEventListener("keydown", function(oEvent) {
if (oEvent.keyCode == 80 && oEvent.ctrlKey)
oEvent.preventDefault();
}, false)
There is a nice trick to fight with IE10+, to avoid display browser menus on alt key combinations, like Alt + F, Alt + H ...
I recently used on IE11, just add an anchor with the attribute accesskey:[yourKey] on your body
<body>
<script type="text/javascript">
window.onkeydown = function(e){
console.log(e.keyCode + " alt: " + e.altKey);
e.preventDefault();
};
window.onkeyup = function(e){
console.log(e.keyCode + " alt: " + e.altKey);
e.preventDefault();
};
</script>
</body>
Now when you press Alt + f the browser will not display "File popup" as usual, and will let events keydown and keyup gets to you, and not only keydown.
I am working on similar problem, hooking keyboard event Below code works well to disable, except the flash object on the IE has not got the focus. Since I am trying to handle keyboard event on the flash object, this code does not work for me.
function hookKeyboardEvents(e) {
// get key code
var key_code = (window.event) ? event.keyCode : e.which;
// case :if it is IE event
if (window.event)
{
if (!event.shiftKey && !event.ctrlKey) {
window.event.returnValue = null;
event.keyCode = 0;
}
}
// case: if it is firefox event
else
e.preventDefault();
}
window.document.onkeydown = hookKeyboardEvents;
From you application after calling the method on Ctrl+P just make the keycode as zero.I think that will solve your problem...
window.event.keyCode=0;
this will set the keycode as zero..So when explorer checks for the keyCode it will be zero...so default function will not execute...
Try this...just a suggestion
This works for me in IE 8. The important part is IE requires ev.returnValue to be set to false. NOTE: this only works if you have focus on some element on the document...that is, if you just load the page and hit 'ctrl-p' you'll see the print dialog. But if you click somewhere on the page, then try it, it should suppress the print dialog.
document.onkeydown = function (e) {
var ev = e||window.event;
// Do what I want keys to do ...
// Block browser short cuts
if(ev.preventDefault) // non-IE browsers
ev.preventDefault();
else // IE Only
ev.returnValue = false;
};

Categories