I have a Flex application. It running in a player on the HTML-page. I need catch the key press events and prevent IE browser from acting like it wants. Here's some code:
Actually, the part where player was layed ..
<html>
<head>
</head>
<body scroll="no" onkeydown=keypress(event)>
<noscript>
<object id="app" width="100%" height="100%" onkeydown="keypress(event)" onkeypress="keypress(event)">
//some params
</object>
</noscript>
</body>
</html>
And here's the one, where I'm trying in a different ways to catch key input:
<script language="JavaScript" type="text/javascript">
function keypress(e) {
alert("Hello from keypress");
}
function init() {
//index
alert("Init!!!");
document.getElementById('app').onkeydown = function() {
alert("Key Pressed - 1");
};
document.onkeydown = function() {
alert("Key Pressed - 2");
};
document.getElementById('app').onkeypress = function() {
alert("Key Pressed - 3")
};
document.onkeypress = function() {
alert("Key Pressed - 4")
};
window.onkeydown = function() {
alert("Key Pressed - 5");
};
window.onkeypress = function() {
alert("Key Pressed - 6");
};
document.body.onkeypress = function() {
alert("Key Pressed - 7")
};
document.body.onkeydown = function() {
alert("Key Pressed - 8")
};
if (window.addEventListener) {
window.addEventListener('keypress', keypress, false);
} else if (window.attachEvent) {
window.attachEvent('onkeypress', keypress);
} else {
window.onkeypress = keypress;
}
}
window.onload = init;
document.onload = init;
</script>
I wasn't going to use them all together, just gathered them all to show you that I've tried almost everything (also including all this with 1 parameter).
The problem is that the only Alert I'm getting is "Init!!!". What's wrong with it or what I'm doing wrong?
Any help would be greatly appreciated.
Edit: I get the "Init" message before the player loads it's content .. maybe the problem is somewhere there?
In Internet Explorer, events that occur within an embedded control in the <object> element do not fire equivalent events on the DOM object. They are consumed by the embedded control, and it is that control's responsibility to handle them accordingly.
This means, when your embedded Flex application is focussed, your JavaScript code will not be able to handle any key events.
Related
I want to show alert before closing a prticluar tab. I have tried different codes over here but couldn't suceeded somwhow.. could somebody guide me where I am going wrong..
My Last try was :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" />
</head>
<body>
<script>
window.onbeforeunload = function (event) {
var message = 'Sure you want to leave?';
if (typeof event == 'undefined') {
event = window.event;
}
if (event) {
event.returnValue = message;
}
return message;
}
</script>
</body>
</html>
Depending on your browser your code works. I've updated the snippet below so it always sets a returnValue which is required by some browsers. If you click the Run code snippet button below and attempt to close the tab you'll get an alert asking if you're sure you want to leave.
However what's important to know is that most browsers have removed the ability to serve custom messages on these alerts for security purposes.
window.onbeforeunload = function (event) {
event.preventDefault();
event.returnValue = '';
};
Adding multiple javascript events programmatically
I have successfully added a form submit event code using the following:
if (window.addEventListener){
window.addEventListener('load', attachFormSubmit, false);
}else if (window.attachEvent){
window.attachEvent('onload', attachFormSubmit );
}
Now I have a textbox on the page text1 and I want to clear the value of it when it takes focus.
I tried adding the following:
function attachFocus()
{
var txt = document.getElementById("text1");
if (txt.addEventListener){
txt.addEventListener('focus', ClearText(txt.id), false);
}else if (txt.attachEvent){
txt.attachEvent('focus', ClearText(this.id));
}
}
function ClearText(id)
{
var obj = document.getElementById(id);
obj.value='';
}
And I added a call to attachFocus to the window load event:
if (window.addEventListener){
window.addEventListener('load', attachFormSubmit, false);
window.addEventListener('load', attachFocus, false);
}else if (window.attachEvent){
window.attachEvent('onload', attachFormSubmit );
window.attachEvent('onload', attachFocus );
}
So the code I added for the textbox focus event does not work. Can someone point out to me what am I doing wrong and also recommend a better way to add events via javascript. I do not want to use inline javascript
when you write ClearText(txt.id)
you are not passing the function
you are calling the function
You should write:
txt.attachEvent('focus', function() {clearText(txt.id);});
Or:
txt.addEventListener('focus', ClearText.bind(txt), false);
function ClearText() {
var obj = document.getElementById(this.id);
obj.value = '';
}
I have to achieve this:
Hide text in a div
User will press Ctrl key, then put his mouse over a button - a javascript function has to be called, and the text in the div should be displayed
If the User releases the Ctrl key - the text should disappear (even if the mouse is on the button), similarly if the User moves the mouse out from the button - the text should disappear (even if the Ctrl key is pressed)
My work so far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
loadHandler = function(){
$("#selector").mouseover(function(e){
if(e.ctrlKey) {
//what do I have to write here so that holding CTRL will be recognized ?
}
});
}
</script>
</head>
<body onload="loadHandler();">
<button type="button" onmouseover="document.getElementById('center').style.visibility = 'visible'">CTRL+mouseover</button>
<div id="center" onmouseout="this.style.visibility = 'hidden'">
<h1>Text text text</h1>
</div>
</body>
</html>
Link
I have to admit that I just started to learn JS so please help me out :)
how to make holding CTRL and mouse over be recognize at the same time ?
Working sample,
MouseEvent.shiftKey, MouseEvent.ctrlKey
MouseEvent.ctrlKey
MouseEvent.shiftKey
<img onmouseover="keypress_test(event)" onmouseout="keypress_test(event)">
function keypress_test(event) {
// false, no press,
// true, pressed
console.log(event.ctrlKey)
console.log(event.shiftKey)
if (event.ctrlKey) {
// hide text
}
}
Perfectly working version
$(document).ready(function(){
var keyPressed = false;
var mouseovered = false;
$("#center").mouseover(function(e){
doStuff();
mouseovered = true;
});
$("#center").mouseout(function(){
doStuff();
mouseovered = false;
});
$(document).keydown(function(e){
doStuff();
if (e.ctrlKey)
{
keyPressed = true;
}
else keyPressed = false;
});
$(document).keyup(function(e){
if (keyPressed)
{
keyPressed = false;
}
doStuff();
});
function doStuff()
{
if(mouseovered && keyPressed) $("#center").css({"color": "#000"});
else $("#center").css({"color": "#fff"});
}
});
I just haven't hidden the text by default. Or else It will be hard for yo find where it is currently. And don't forget to click on the body before checking. Else keypress wont be detected.
Working Fiddle
I want to capture the browser close event in my application and show a confirm box to user.
I am using JSF 2.0 and richfaces 4.0.
window.onbeforeunload = function ()
{
var shallIAlertUser = Do_Whatever(); //get boolen value
if (shallIAlertUser) {
//this will alert user
return 'Are you sure?';
}
else {
//this wont
window.onbeforeunload = undefined;
}
};
Use the beforeunload event.
window.onbeforeunload = function(event) {
event = event || window.event;
var confirmClose = 'Are you sure?';
// For IE and Firefox prior to version 4
if (event) {
event.returnValue = confirmClose;
}
// For Safari
return confirmClose;
}
Keep in mind this will be fire for other events besides closing the window, such as reloading and form submission.
onbeforeunload
< body onbeforeunload="alert('Closing');">
Example :
<html>
<head>
<title>`onbeforeunload` Event Demo</title>
</head>
<body onbeforeunload="return 'Are you sure you want to exit ?';">
</body>
</html>
Attach a handler to the unload event.
Let's say I have the following link:
Click Me!
When clicked this link will alert a message as well as appending a pound sign on the end of the page url. This doesn't look very pretty is there any way to avoid it besides using javascript in the url itself:
Click Me!
You have to prevent the default response from occurring.
The old-fashioned approach is to return false from it:
Click Me!
Or, better:
Click Me!
<script type="text/javascript">
window.onload = function() {
document.getElementById('myLink').onclick = function(event) {
alert('You clicked a link.');
return false;
};
};
</script>
The best approach nowadays is to call the proper method of the event property:
Click Me!
<script type="text/javascript">
window.onload = function() {
document.getElementById('myLink').onclick = function(event) {
alert('You clicked a link.');
event.preventDefault(); // <---
};
};
</script>
It's also best to replace that # with an URI to some proper page, for people not using JavaScript. In some jurisdictions, accessibility is in fact a legal requirement.
Edit Fixed for bleedin' IE:
function f() {
document.getElementById('myLink').onclick = function(e) {
alert('You clicked a link.');
if (!e) {
var e = window.event;
}
// e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;
// e.stopPropagation works only in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
};
window.onload = f;
The trick is return false on the event handler.
Click Me!