Keypress but not when input or textarea is in focus - javascript

I'm using the code below :
$(document).keypress(function (e) {
if (e.which === 68 || e.which === 100) {
doStuff();
}
});
What i want is to capture the key 'D' as a shortcut to a function in my page. Problem is , this page has inputs and textarea controls and when i'm'typing on this controls, the 'doStuff()' function is called.
How to avoid it ? I want the key 'D' capture only if the user is not typing anything in editable controls.
Thanks !

Alternatively to e.target, you could test if the current active element is an input or textarea:
$(document).keypress(function (e) {
var focussedTag = document.activeElement && document.activeElement.nodeName;
if( focussedTag === 'INPUT' || focussedTag === 'TEXTAREA' ) {
return;
}
if (e.which === 68 || e.which === 100) {
doStuff();
}
} );
Fiddle: https://jsfiddle.net/e1qtapo6/

$(document).on('keypress', ':not(:input)', function (e) {
if (e.which === 68 || e.which === 100) {
doStuff();
}
});

Add another check before executing the 'doStuff' function. Check if the user has any input element in focus, and if true then only execute the statement.
Something like this:
$(document).keypress(function (e) {
if ( (e.which === 68 || e.which === 100) && (!$(input).is(":focus")) ) {
doStuff();
}
});

Another one -
$(document).keypress(function (e) {
if (e.which === 68 || e.which === 100) {
var _node = e.target.nodeName;
if( _node !== "INPUT" && _node !== "TEXTAREA" ){
doStuff();
}
}
});

Related

I have a code that won't accept white spaces when keypress but it's not working.

Here is my code:
<script>
$(function() {
$('body').on('keydown', '#distype, #val', function(e) {
console.log(this.value);
if (e.which === 32 && e.target.selectionStart === 0) {
return false;
}
});
});
</script>
the #distype, #val are the id of the text input.
You are attaching the onKeyDown Listener to body. Shouldn't be to the input itself? Also, it should be e.which || e.keyCode.
like so:
$("#distype").on("keydown", function (e){
console.log(this.value);
if (e.which && e.target.selectionStart === 0 || e.keyCode === 32 && e.target.selectionStart === 0) {
return false;
}
}

How can you create a event listener that listens to a combo of keypresses (ctrl and left/right arrow)?

I have the following code which navigates between elements using the left and right arrow keys.
$(document).keydown(function (event) {
if (event.keyCode === 37) {
console.log("left")
currentPosition > 0 ? currentPosition-- : maxFocusablePosition;
}
if (event.keyCode === 39) {
console.log("right")
currentPosition < maxFocusablePosition ? currentPosition++ : 0;
}
I tried implementing the following, but it doesnt work:
if ( event.ctrlKey && ( event.which === 37 ) ) {
console.log( "Combo Move" );
}
Really? I am surprised because ctrlKey and which work for me!
The keyboard event API is a disgrace. The W3C has been dragging their feet for a long time regarding the standardization of keyboard events. This is why you may see a lot of conflicting information.
$(function() {
var input = $('input');
input.on('keydown', function(event) {
if (event.which === 37 && event.ctrlKey) {
input.val('ctrl-left');
} else if (event.which === 39 && event.ctrlKey) {
input.val('ctrl-right');
} else {
input.val('');
}
});
input.focus();
});
input { width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="Press Ctrl-left or Ctrl-right in here">
Use keyCode as below and use in the function.
$(document).keydown(function (event) {
var keyCode = event.keyCode || event.which;
if (keyCode === 37) {
console.log("left")
currentPosition > 0 ? currentPosition-- : maxFocusablePosition;
}
if (keyCode === 39) {
console.log("right")
currentPosition < maxFocusablePosition ? currentPosition++ : 0;
}
if ( event.ctrlKey && ( keyCode === 37 ) ) {
console.log( "Combo Move" );
}

Disable Ctrl key in IE 8

I want to disable the ctrl key in the IE browser.I had tried some solution using javascript but nothing is working can someone please help me to find out the solution
document.onkeydown = function () {
if (event.keyCode == 17) alert('Ctrl Key is disabled');
};
document.onkeydown = function(e) {
if (e.altKey && (e.keyCode === 36)) {//Alt+home blocked.
return false;
}
if (e.altKey && (e.keyCode === 70)) {//Alt+f blocked.
return false;
}
};
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;
function Disable_Control_C() {
var keystroke = String.fromCharCode(event.keyCode).toLowerCase();
if (event.ctrlKey && (keystroke == 'c' || keystroke == 'v' || keystroke == 'p' || keystroke == 's' || keystroke == 'u')) {
alert("this function is disabled");
event.returnValue = false; // disable Ctrl+C
}
}
<body onkeydown="javascript:Disable_Control_C()">
this is what i do it to run in the IE...

Number in textfield should be autoformatted only after user clicks outside the textbox?

I have a problem. Basically, what happens in my case is that the numbers in my textbox are autoformatted as I type. I don't want this to happen. What I want is that the numbers should be autoformatted only when the user clicks outside the textbox.
In my input tag I have :
onkeyup="format(event, this);"
My javascript function is :
function format(e, obj) {
if (e.keyCode == 36) {
press1(obj);
}
if (e.keyCode == 13) {
return false;
}
if ((e.keyCode <= 34) || (e.keyCode >= 46 && e.keyCode < 58) || (e.keyCode >= 96 && e.keyCode <= 105)) { // //alert(e.keyCode);
obj.value = CommaFormatted(obj.value);
} else {
if (e && e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
} else {
e.cancelBubble = true;
e.returnValue = false;
}
return false;
}
}
where the press1 function is:
function press1(textControlID) {
var text = textControlID;
if (text.getAttribute("maxlength") == text.value.length) {
var FieldRange = text.createTextRange();
FieldRange.moveStart('character', text.value.length);
FieldRange.collapse();
FieldRange.select();
return true;
}
if (text != null && text.value.length > 0) {
if (text.createTextRange) {
var FieldRange = text.createTextRange();
FieldRange.moveStart('character', text.value.length);
FieldRange.collapse();
FieldRange.select();
} else if (text.setSelectionRange) {
var textLength = text.value.length;
text.setSelectionRange(textLength, textLength);
}
}
}
I really hope this could be solved. Please!
You could change onkeyup to onblur, which is the event that gets fired when the control loses focus - clicking out of it.
The onkeyup event fires with every keypress.

How to limit Tab listener to callback only if the textbox has change

I'm trying to implement a Tab key listener for a textbox.
$('#mytextbox').live('keydown', function (e) {
if (e.keyCode == 9 || e.which == 9) {
// TO DO SOMETHING
}
});
However, for some reason I need to limit the tab listener's callback to invoke only when the textbox has changed. Is there anyway to do this?
You might be able to check the value of the input field to make sure it's different from it's original value?
E.g.
$('#mytextbox').live('keydown', function (e) {
if ((e.keyCode == 9 || e.which == 9) && ($('#TextBox').val() != 'Starting Value')) {
// TO DO SOMETHING
}
});
You can do it just like:
var data = "";
$('#mytextbox').live('keydown', function (e){
if(e.which == 9 || e.keyCode == 9){
if($(this).val() != data){
alert('changed!');
data = $(this).val();
}
}
});
http://jsfiddle.net/DDCZS/1/
Or without storing / knowing value of that textbox:
var changed = false;
$('#mytextbox').on('keydown', function (e) {
if (e.which == 9 && changed) {
e.preventDefault();
// TO DO SOMETHING
alert("works");
changed = false;
} else {
changed = true;
}
});
http://jsfiddle.net/9a37b/

Categories