I have issue with Android in jQuery Terminal, I've almost fix it, it work on devices I've tested. Demo. But it seems that keypress event don't fire at all (It should echo keypress) on some devices.
On mobile I have code that keep focus on textarea (I resued clipboard) so virtual keyboard is open.
I have this code in keydown:
function keydown_event(e) {
...
if (enabled) {
...
} else {
// this get fired while typing
$.terminal.active().echo('keydown else');
prevent_keypress = false;
return;
}
// this will prevent for instance backspace to go back one page
prevent_keypress = true;
$.terminal.active().echo('keydown return false');
return false;
}
...
}
}
and in keypress:
var doc = $(document.documentElement || window);
doc.bind('keypress.cmd', function(e) {
var result;
if (e.ctrlKey && e.which === 99) { // CTRL+C
return;
}
// this line never get fired while typing
$.terminal.active().echo('keypress');
if (prevent_keypress) {
$.terminal.active().echo('prevent');
return;
}
if (!reverse_search && $.isFunction(options.keypress)) {
result = options.keypress(e);
}
if (result === undefined || result) {
...
self.insert(String.fromCharCode(e.which));
...
} else {
return result;
}
}).bind('keydown.cmd', keydown_event);
Anybody had same issue and know how to fix it, it's hard for me because it work on my devices.
UPDATE I've create simple test to isolate the problem and it seems that keypress is not fired at all.
I manage to fix (almost) the issue by detecting if keypress was not fired and get value from clipboard (for mobile the content it's always the same as terminal input)
var no_keypress;
doc.bind('keydown.cmd', function(e) {
no_keypress = true;
...
}).bind('keypress.cmd', function(e) {
no_keypress = false;
...
}).bind('keyup.cmd', function() {
if (no_keypress) {
// Some Androids don't fire keypress - #39
self.set(clip.val());
}
});
Related
My iframe game is reading the keyboard including space, but on some browsers (Firefox, Safari) pressing Space also scrolls my page down, that causes my game to partially go out of screen. Sometimes it seems the page even scrolls back up when some other keys are pressed...
My game handles keypresses on "keyup" event.
input.addEventListener("keyup", function (e) {
//game handles all keys including space here
}
Because of using keyup event, this answer is not suitable to prevent space ;
Pressing spacebar scrolls page down?
If I add this code, my game does not receive keyup events:
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
When I add this code above to parent html page, having ifreme, it only works if keyboard focus is clicked to parent html. When focus is inside iframe, the code does not work.
It seems above code fixed issue for Safari!
The onkeypress event fires the browser scrolling. You can call preventDefault in this event, and the keyup and keydown events will continue to fire as intended.
window.onkeypress = function(e) {
if (e.keyCode == 32) {
e.preventDefault();
}
};
window.onkeyup = function(e) {
console.log("Space key up!")
};
You need preventDefault
window.addEventListener('keydown', (e) => {
if (e.keyCode === 32) {
e.preventDefault();
}
});
See this codepen for a demo: https://codepen.io/xurei/pen/MWyveEp
You have to find the right window object first
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
var myFrame = document.getElementById('targetFrame');
var frame_win = getIframeWindow(myFrame);
and then add the listeners to stop the spacebar event from bubbling up.
if (frame_win) {
var preventSpace = (e) => {
if (e.keyCode === 32) {
e.preventDefault();
}
};
frame_win.addEventListener('keydown', preventSpace);
frame_win.addEventListener('keyup', preventSpace);
frame_win.addEventListener('keypress', preventSpace);
}
I am trying to run some code when the browser back button is clicked.
How can i found out browser's back button with out changing the browser history?
I tried the code below.
I got an exception in the else block saying: "event is not defined".
window.onunload = HandleBackFunctionality();
function HandleBackFunctionality()
{
if(window.event)
{
if(window.event.clientX < 40 && window.event.clientY < 0)
{
alert("Browser back button is clicked…");
} else {
alert("Browser refresh button is clicked…");
}
} else {
if(event.currentTarget.performance.navigation.type == 1)
{
alert("Browser refresh button is clicked…");
}
if(event.currentTarget.performance.navigation.type == 2)
{
alert("Browser back button is clicked…");
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
use
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// do something
}
if (direction == 'forward') {
// do something else
}
});
Okay. Besides the fact that you should not initially trigger the event and to .unload = FunctionName and not .unload=FunctionName() and that you need to pass the event-argument I checked the code in the browser.
currentTarget is empty - this totally makes sense as there is no event-target like onclick but it is just the site reloading/unloading.
Please debug the code by yourself by using this and fit it to your needs:
window.onunload = HandleBackFunctionality;
function HandleBackFunctionality(event)
{
console.log(event, window.event);
}
You will see that currentTarget is not set (while event is).
This is the only solution that works for me with IOS safari.
<script>
window.addEventListener( "pageshow", function ( event ) {
var pagehistory = event.persisted ||
( typeof window.performance != "undefined" &&
window.performance.navigation.type === 2 );
if ( pagehistory ) {
// back button event - Do whatever.
}
});
</script>
I have 3 buttons with hover states which makes a little tooltip appear to describe the button. They work fine but on touchs screen they do not disappear after the user clicks on the button.
So I've tried a few js scripts for checking if a device is a touch device or not. They almost work but they also when I test on IE11 it also gets detected as a touch device. Chrome & Firefox do not get mistaken as a touch device.
Any sugestions?
Her is what I've tried
/*****************************
TOUCH DEVICES HOVER FIX START
****************************/
// http://stackoverflow.com/a/4819886/1814446
function isTouchDevice() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
};
// http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it
var hasTouch;
window.addEventListener('touchstart', function setHasTouch () {
hasTouch = true;
// Remove event listener once fired, otherwise it'll kill scrolling
// performance
window.removeEventListener('touchstart', setHasTouch);
}, false);
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
define(['Modernizr', 'prefixes', 'testStyles'], function( Modernizr, prefixes, testStyles ) {
// Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
Modernizr.addTest('touchevents', function() {
var bool;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
bool = true;
} else {
var query = ['#media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join('');
testStyles(query, function( node ) {
bool = node.offsetTop === 9;
});
}
return bool;
});
});
if(bool===true) {
console.log('Touch Device'); //your logic for touch device
jQ( "#btn-1, #btn-2, #btn-3" ).click(function() {
jQ("#btn-1 .tooltip").css('opacity', '0');
jQ("#btn-2 .tooltip").css('opacity', '0');
jQ("#btn-3 .tooltip").css('opacity', '0');
});
}
else {
//your logic for non touch device
}
For IE10+ you can utilize "window.navigator.msMaxTouchPoints"
example code
function isIETouch ()
{
return window.navigator.msMaxTouchPoints == undefined ? false : window.navigator.msMaxTouchPoints;
}
I want to detect a tab/window close event (excluding F5 refreshing and link-click event and so on) and then show a overlay. I found some answer online which is like this:
endSession: function() {
//customized overlay goes here
},
wireUpEvents: function() {
var self = this;
self.validNavigation = false;
window.onbeforeunload = function() {
if (!self.validNavigation) {
self.endSession();
return "bye"; // Chrome needs a returned string to fire the event
}
}
$('html').bind('keypress', function(e){
if (e.keyCode == 116) {
self.validNavigation = true;
}
});
$('a').bind("click", function(){
self.validNavigation = true;
});
$('form').bind('click', function(){
self.validNavigation = true;
});
$('input[type=submit]').bind('click',function(){
self.validNavigation = true;
});
}
$(document).ready(function() {
wireUpEvents();
});
But I just found two weird things:
The F5 keypress event cannot be detected, it can only detect those number and character keypress event. And what surprised me the most is that it is the character t instead of F5 which has keyCode == 116! (it seems that 116 is the ascii code for lowercase t)
As Chrome needs a returned string to fire the event, it always shows a default popup with the string in it when it fires, which means I cannot create my customized popup with jqueryui or something. How to fix this?
I'm trying to simulate some software in a browser window for training purposes. When the user presses f3 I need it to go back to the prior page instead of opening the search dialogue in IE7. I've tried the following code but I receive:
An error has occuredError: 78 Permission Denied
Any ideas?
$('#command').keydown(function(e) {
if(e.which === 114) {
e = 0;
history.go(-1);
}
});
Move the redirect to the keyup handler and simply return false; from the keydown handler. Returning false from the keydown event will cause the built in handler to not fire, then the keyup event will redirect.
$('#command').keydown(function(e) {
if(e.which === 114) {
return false;
}
});
$('#command').keyup(function(e) {
if(e.which === 114) {
history.go(-1);
}
});
http://jsfiddle.net/CUDaR/4/