I have placed the following code at the top of my page in the head:
<script type="text/javascript">
function stopRKey(evt) {
console.log(evt.keyCode);
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
console.log(evt.keyCode);
if ((evt.keyCode == 13) && (node.type == "text")) {
return false;
}
}
document.onkeypress = stopRKey;
</script>
On one of my pages it is not firing the event when I hit enter. But only one one of my pages the reast seem to work and log a keycode of 13 thus stopping the postback.
Any ideas why this event wouldnt be firing on this certain page?
Cheers,
Pete
You can certainly simplify the code. There's no reason why this shouldn't work, for <input type="text"> elements:
function stopRKey(evt) {
evt = evt || window.event;
var node = evt.target || evt.srcElement;
console.log(evt.keyCode);
if (evt.keyCode == 13 && node.nodeName == "INPUT" && node.type == "text") {
return false;
}
}
Perhaps there form element on your broken page(s) triggering the postback that is not a text node. Try removing the second part of the condition that prevents the submit, to see what happens:
if (evt.keyCode == 13) {
return false;
}
Related
there is a input where blur() event is trigger, and this input, i want to detect if was triggered with a Tab key, shift+tab keys or a click out. Detecting with just Tab key and click out, i've got. But the Shift+Tab keys, i couldn't. i've tried detect with window.event.shiftKey, or using on() of JQuery's method, and attach keyup, keydown, keypress to see if detect one first of the other. But, was unsuccessful. How can i detect this ?
I built these codes, but no one works:
1.
var shift_key; var key = window.event.keyCode;
$("#address").on('focusout blur keyup keydown keypress',function(e){
if(e.type == 'keyup' || e.type == 'keydown' || e.type == 'keypress'){
if(key == 16){
shift_key = true;
}
}else if((e.type == 'focusout' || e.type == 'blur') && key == 9){
if(shift_key == true){
document.getElementById('city').focus();
}
}
});
(This one, i tried to catch one the Shift code and after the Tab code. 'Cause when triggers a key event he doesn't blur of the input, so, i tried to catch in keyup, keydown or keypress the Shift key. And when the Tab were pressed, it automatically blur of the input, so, i tried to catch the Tab key)
$("#address").on("keyup keydown keypress", function () {
var shift_key = key;
setTimeout(function(){
$("#address").on("blur focusout", function () {
var shift_key = key;
});
}, 400);
});
This maybe what you want will detect which type of event was used to leave the input.
$("#z").on('keydown blur', function(e) {
if (e.shiftKey && e.keyCode === 9) {
console.log('shift tab')
return false;
} else if (e.keyCode === 9) {
console.log('tab')
return false;
} else if(e.type == 'blur') {
console.log('mosueOUt')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="z" />
Maybe something like this is what you are looking for?
var tabKey = false,
shiftKey = false;
$('#input').on('blur', function(e) {
if(tabKey) {
if(shiftKey) {
console.log('Blurred by shift + tab');
}
else {
console.log('Blurred by tab');
}
}
else {
console.log('Blurred by mouse');
}
tabKey = shiftKey = false;
});
$('#input').on('keydown', function(e) {
tabKey = e.which === 9 ? true : false;
shiftKey = e.shiftKey;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" />
You don't need to store the shift key. You can use e.shiftKey
$("#address").on('focusout blur keyup keydown keypress',function(e){
if(e.type == 'keyup' || e.type == 'keydown' || e.type == 'keypress'){
/*
if(key == 16){
shift_key = true;
}
*/
}else if((e.type == 'focusout' || e.type == 'blur') && e.key == 9){
if(e.shiftKey){
document.getElementById('city').focus();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Address
<input id="address" />
City
<input id="city" />
I am trying to stop the user from navigating away from the page while they are inputting some text. I am doing this by suppressing the F5 button and the backspace button, which goes back.
Now I notice that I cannot press t. When I check the logs, it's because t is giving me a key event code of 116 which is the same as the F5 button.
How can I get around this?
Here is a code snippet.
function suppressBackspaceAndF5(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
// when I release "t" - the code is 116, which is the same as the refresh code.
console.log(evt.keyCode);
if ((evt.keyCode == 8 &&
!/input|textarea/i.test(target.nodeName)) ||
evt.keyCode == 116) {
return false;
}
}
document.onkeydown = suppressBackspaceAndF5;
document.onkeypress = suppressBackspaceAndF5;
<input></input>
I found this related Stackoverflow question which seems to contains your answer. Posting here specifically as a reference:
capturing f5 keypress event in javascript using window.event.keyCode in window.onbeforeunload event is always 0 and not 116
Excerpt: by SO user Sim_ba
Dont use e.keyCode == 166 use e.code == 'F5' instead.
function fkey(e){
e = e || window.event;
if( wasPressed ) return;
function fkey(e){
e = e || window.event;
if (e.code === 'F5') {
alert("f5 pressed");
wasPressed = true;
}else {
alert("Window closed");
}
}
This is because the 't' and 'F5' both use the keycode number 116. [...]
Go vote Sim_ba up as well! :)
As you may know some browsers have this default functionality to scroll page down when spacebar is clicked. I usually like this feature, but due to nature of my website I need to get rid of it.
I've been using
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
which eats all spacebar functionality and gets the job done, however if user is typing in a comment or a search query and they press spacebar no space is added in a text as this functionality has been eaten up.
So is there a way to disable just the scrolling part and leave all other functionality as it is?
window.onkeydown = function(e) {
return !(e.keyCode == 32 && (e.target.type != 'text' && e.target.type != 'textarea'));
};
Maybe try this:
window.onkeydown = function(e) {
if(e.keyCode == 32 && e.target.nodeName.toUpperCase() === "BODY") e.preventDefault();
};
Probably need to equalise for IE:
window.onkeydown = function(e) {
var evt = e || window.event;
var elem = evt.target || evt.srcElement;
if(e.keyCode == 32 && elem.nodeName.toUpperCase() === "BODY") {
evt.preventDefault();
return false;
}
};
(untested)
But you would need to attach an event to/within each iframe, using iframeref.contentWindow.
After the page and iframes have loaded you could loop through the frames[] collection.
Found this script:
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
Only issue, it also stops enter key being used in textarea. Which is a hassle.
I have toyed with using:
onkeypress="return handleEnter(this, event)"
But our forms are extremely complex, and I am looking for a cleaner way of doing things.
You need to check the nodeName or tagName of the event target here, like this:
if (evt.keyCode == 13 && node.nodeName != "TEXTAREA") { return false; }
I noticed after this was accepted that you are already using jQuery, you can just replace all your code above with this:
$(document).keypress(function (e) {
if(e.which == 13 && e.target.nodeName != "TEXTAREA") return false;
});
I think you can just change this line
if (evt.keyCode == 13 && node.type == "text") {
return false;
}
to
if (evt.keyCode == 13 && node.type != "TEXTAREA") {
return false;
}
If you use jquery (highly recommended) then this will automatically add the function to allow use of the enter key:
$("textarea").focus(function () {
$(this).keypress(handleEnter);
});
I have 3 fields on a page and when the user has the cursor focused on two of them I want a certain button on the page to be the one thats pressed when they hit enter. I am using
<script language="JavaScript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
}
document.onkeypress = stopRKey;
</script>
To halt the default behaviour I just cant see how to modify it to let certain keypresses through. I did look at a tutorial http://asquare.net/javascript/tests/KeyCode.html but it wasnt obvious what is happening.
Anybody know how to do this or a tutorial that goes over this?
Use jQuery (this should work):
$('#input_id').keypress(function(event) {
if (event.keyCode == '13') {
// press correct button
}
});
Make one for each of your fields and point toward the correct button.
If you want to skip jQuery, its still really simple:
<script language="javascript">
document.getElementById('myInput1').addEventListener('keypress', handlePress);
document.getElementById('myInput2').addEventListener('keypress', handlePress);
function handlePress(evt)
{
if( evt.keyCode == 13 )
{
// execute your function here
console.log('Enter pressed while in desired text input')
}
}
</script>