I am trying to catch keycode for Dot and Delete but on different events.
function validateSomething(eve) {
var charCode = (eve.which) ? eve.which : eve.keyCode
if (charCode == 46)
console.log("Killer Brand")
}
When i press DOT or Delete in textbox; on keypress call above function; the if statement executes on both. Why? How to resolve then?
Use keydown event instead. As W3schools says:
The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT,
ESC) in all browsers. To detect only whether the user has pressed a
key, use the onkeydown event instead, because it works for all keys
So it can be detected with same codes on keypress. Read more here:
So, here is a working example: http://www.w3schools.com/jsref/event_onkeypress.asp
<input type="text" onkeydown="validateSomething(event)" />
function validateSomething(eve) {
var charCode = (eve.which) ? eve.which : eve.keyCode
if (charCode == 46) {
console.log("Killer Brand")
}
}
Related
I want to run a method whenever the ESC button gets clicked. In the onkeypress Event documentation I read that i will have to use keydown
Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.
I managed to write a working example:
document.onkeydown = function (e) {
if (document.getElementById("fullscreen") !== null) {
var key = e.which || e.keyCode;
if (key === 27) {
alert(1);
}
}
}
<div id="fullscreen">test</div>
The event listeners in our project have a different pattern, so I tried rewrite it in the same pattern but the code isn't reacting on the key press.
document.getElementById("fullscreen").addEventListener("keydown",
function (e) {
var key = e.which || e.keyCode;
if (key === 27) {
alert(1);
}
});
<div id="fullscreen">test</div>
Why isn't the second code snippet reacting on the key press like the first snippet?
I want to detect the Control + A event in input. I can find the Control + A event, but the function is continuing even after return false.
jsFiddle - http://jsfiddle.net/f6rcgpmh/4/
$('.searchTerm').keyup(function(e) {
$("#status").text("");
if (e.ctrlKey) {
if (e.keyCode == 65 || e.keyCode == 97) { // 'A' or 'a'
console.log("Control pressed");
e.preventDefault();
return false;
}
}
$("#status").text("This should not work if Ctrl + A is pressed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search" class="search">
<input class="searchTerm" placeholder="Filter Books...">
<input class="searchButton" type="submit">
</form>
<div id="status"></div>
I want this to work in keyup not in keydown. Because I am using autosearch and I don't want to call function before keyrelease. And also Ctrl + A won't highlight text in keydown when it returned false.
Actually the function stops. What you are experiencing is that two keyup events trigger: the one from ctrl and the one from A.
The first one returns as expected because it does fill the requirements: ctrlKey == true and keyCode == 65 || keyCode == 97.
But the second one, there will be only one key pressed so both statements can't be true together:
If you last released the ctrl, then ctrlKey is true but keyCode == 65 || keyCode == 97 is not.
If you last released the A, then ctrlKey is now false.
Then the line which sets #status to an error message is run.
Actually it's not. You must change your event from 'keyup' to 'keydown'. Then try it again. You can check this fiddle. http://jsfiddle.net/ebilgin/f6rcgpmh/5/
If you need control on autocomplete, you have to put your controls before sending the data.
The Ctrl keyup event trigger causes your problem. I added another condition to your code,
if (e.keyCode == 17) // Ctrl key, fires at Ctrl's keyup.
return false;
You can check my new fiddle, http://jsfiddle.net/ebilgin/f6rcgpmh/10/.
I am using the below javascript to alert when the user presses delete, backspace and space inside a textbox. I need to alert if any key is pressed inside the textbox and probably I can mention the keycode in the script for each key. But can anyone tell me if there is any other way to alert when any key is pressed?
function doCheck() {
var keyCode = (event.which) ? event.which : event.keyCode;
if ((keyCode == 8) || (keyCode == 46) || (keyCode == 32))
alert('The column is readonly and is non-editable');
event.returnValue = false;
}
Can you try this, Event Handlers onkeypress
onkeypress="KeyPressCheck(event)"
Javascript:
function KeyPressCheck(event){
console.log('pressed::'+ event.keyCode);
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress
Use jQuery to attach the event, otherwise you will have to add on handler attributes to every element manually. Try this:
$('.texboxes').keypress(function(e) {
if ((e.which == 8) || (e.which == 46) || (e.which == 32)) {
alert('The column is readonly and is non-editable');
event.returnValue = false;
}
});
function doCheck(event)
and pass event where you are using this function
for eg.
onclick="doCheck(event)"
You can use JQuery Keyup Event handler to find which key is press.
$( "#SelectorId" ).keyup(function( event ) {
//check for which key is pressed.
if ((event.which== 8) || (event.which== 46) || (event.which== 32)){
alert("Some message");
event.preventDefault();
}
});
Why to use keyup event :
keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.
For whatever reason I can't capture "SHIFT+TAB" combination.
I am using the latest jQuery.
Same result if I use other ajax/javascript, etc.
Here is a simple example that should work as I currently understand it...
event.which or event.KeyCode are always "undefined" only shiftKey exists in a scenario involving a "SHIFT+TAB" or backward keyboard traversal, traditionally inherent in windows based apps/web or otherwise...
function ShiftTab()
{
debugger;
if(event.KeyCode == 9 && event.shiftKey) // neither this line nor the following work
// if (event.which == 9 && event.shiftKey) // shift + tab, traverse backwards, using keyboard
{
return true;
}
else
{
return false;
}
}
this seems to be yet another item related to tab order that no longer works as it traditionally worked in Microsoft.Net WinForm/WebForm based apps.
If you are using jQuery, this should be how the code is working. Make sure keyCode is lower case. Also, jQuery normalizes keyCode into which:
$(document).keyup(function (e) {
if (e.which === 9 && e.shiftKey) {
ShiftTab();
}
});
If you're into terse JavaScript:
$(document).keyup(function (e) {
e.which === 9 && e.shiftKey && ShiftTab();
});
jQuery 1.7+ on syntax:
$(document).on('keyup', function (e) {
e.which === 9 && e.shiftKey && ShiftTab();
});
I created a function which I wired up to my button's onkeydown event. I used onkeydown, because onkeypress would not capture my tab key press
function ShiftTab(evt) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode; // for trans-browser compatibility
if (charCode === 9) {
if (e.shiftKey) {
$('#controlName').focus();
return false;
} else {
return true;
}
}
I took this approach to deal with two specific problems:
onkeypress would not capture tab key press
When click shift-tab, shift key press would trigger function, so I had nest the shiftkey modifier check
use same code inside keypress event.
the tab changes the element between keypress and keyup.
here we get event.key = tab and event.shiftKey = true.
How can I prevent users from using the backspace or delete keys in a textbox using JavaScript?
I have a text box in my web form. I want to use JavaScript on keypress of the textbox to disable the delete and backspace keys.
Can anyone help?
Why are you letting people edit the contents of the text box but restricting them from being able to use basic editing keys? This sounds like you are creating a major usability issue - what if the user makes a typo?
I'd recommend either setting the readonly flag (if you don't want users to edit the value) or disabled flag (if you don't even want it submitted)
Here's a bit of code to block the certain key press events - or something along those lines (haven't tested the code).
function isValidKey(e)
{
var charCode = e.keyCode || e.which;
if (charCode == 8 || charCode == 46)
return false;
return true;
}
<input id="tb_box" onkeydown="return isValidKey(event)" type="text" />
using javascript create function takes the event keyboard typing then avoid backspace (key-code 8) and delete (key-code 46) keys
function preventBackspace(e) {
var evt = e || window.event;
if (evt) {
var keyCode = evt.charCode || evt.keyCode;
if (keyCode === 8 || keyCode === 46) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
}
}
<input onKeyDown="preventBackspace()" placeholder="Try write Something and enter backspace...">