I have a autocomplete textbox in a form and I want to detect whether user has focussed on the textbox from navigating through tab key press.I mean tabindex has been set up on different form fields and user can navigate fields by pressing tabs.Now I want to perform some action when user directly mouse click/foxus on the textbox and some other action when user has focussed on the textbox through tab.
Below is the code I was trying.But no matter everytime code is 0.
$('#tbprofession').on('focus', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('Tabbed');
}
else
{
alert('Not tabbed');
}
});
This code does not work.
Note:Before marking duplicate it will be good if you understand the question correctly.Else I can make it more clear with more elaborated description.
Anyone can show me some light?
You can try something like that :
$(document).on("keyup", function(e) {
if ($('#tbprofession').is(":focus")) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('I was tabbed!');
} else {
alert('not tabbed');
}
}
});
fiddle : https://jsfiddle.net/xc847mrp/
You can use keyup event instead:
$('#tbprofession').on('keyup', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
console.log('I was tabbed!', code);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autofocus>
<input id='tbprofession'>
You could have an array of key events triggered anytime a user presses a key while on your page. Although this makes you think of a keylogger.
Or just keep the last key.
Or a boolean saying if the last key pressed was a TAB or not.
And on focus you can look at that variable.
Related
I want to write a code that if a user press a key, It changes the keyCode or charCode of the User event and trigger the event with a new charcode,
I wrote this code in jsfiddle but this code doesn't work because of too much recursion.
function convert(e, elem) {
function getKey(event) {
if (event.which == null) {
return event.keyCode // IE
} else if (event.which != 0 && event.charCode != 0) {
return event.which // the rest
} else {
return null // special key
}
}
var key = getKey(e);
key++;
return key;
}
$(".myInput").keypress(function (e) {
var returnedKey = convert(e, this);
e.which = e.keyCode = returnedKey;
$(this).trigger(e);
});
<input type="text" class="myInput" />
any Idea that help my code work would be appreciated.
Thanks alot.
Regarding the recursion issue, you need to add a stopping condition, for example:
$(".myInput").keypress(function (e) {
var returnedKey = convert(e, this);
e.which = e.keyCode = returnedKey;
if(!e.isSecondTrigger){
e.isSecondTrigger = true;
$(this).trigger(e);
}});
This way, you only change the value once. However, as was stated by LShetty in the comments section, the event values are read only - you can't change the value of the button that was already pressed and in that way change the input text. In order to do this, you need to manually change the value of the input text after each user action (i.e. hold the value of the input text at each key press, modify it when the user presses a key, and then overwrite the input field value with the output).
I have an asp:TextBox with AutoCompleteExtender attached. This is my code
txtSearch.Attributes.Add("OnKeyPress", "ProcessKeyPressed()")
function ProcessKeyPressed()
{
if(event.keyCode == 13)
{
Search()
}
}
The function Search() gets called when the user types in a word and presses enter.However, the enter key is not detected when the user hits the tab key to select one of the auto complete suggestions...Any ideas how I can fix this?
Many thanks,
You can add this code for
if(event.keyCode == 13 && e.keyCode == 9) //9 For Tab
{
....
}
LInk : http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
I have a visualforce page (Salesforce) where I'm trying to capture the user pressing enter in a text field and firing a button click.
Here is my jquery code:
$(document).ready(function() {
$("#thisPage\\:theForm\\:siteNumber").keypress(function() {
if(window.event){
key = window.event.keyCode; //IE, chrome
}
else{
key = e.which; //firefox
}
if(key == 13) {
$("#thisPage\\:theForm\\:siteButton").click();
}
});
});
Its very odd, I've verified the key equals 13 and its entering the if statement. I've also tried moving the .click() action above the if key==13 condition and it fires fine. It just doesn't work inside the if key==13 condition I know its entering.
I've recreated what its basically doing in this simple fiddle, but of course it works fine: http://jsfiddle.net/2adPe/
Any help is appreciated!
UPDATE:
I've figured out that this will work
function noenter(e){
if(window.event){
key = window.event.keyCode; //IE, Chrome
}
else{
key = e.which; //firefox
}
if(key == 13) {
document.getElementById('thisPage:theForm:siteButton').click();
return false;
}
else{
return true;
}
}
with
onkeypress="return noenter(event)"
on the textbox. Is there a way to do this unobtrusively??
Try referencing your element IDs using the jQuery Attribute Ends With Selector.
Like this:
$("[id$='input1']").on("keypress",function(e) { // e is the current event
if(e){
key = e.keyCode; // IE, chrome
}
else{
key = e.which; // firefox
}
if(key == 13) {
e.preventDefault(); // prevent a form submit when pressing enter (on IE)
$("[id$='siteButton']").click(); // simulate a click of the siteButton
}
});
Also, you'll want to prevent the default action if the key == 13. Otherwise, the button click might be executed twice.
http://jsfiddle.net/2adPe/3/
Finally got it! I had to remove the e.preventdefault() from before the .click() and add return false at the end that stopped the default action from happening.
$('input[name$="siteNumber"]').keypress(function() {
if(window.event){
key = window.event.keyCode; //IE, chrome
}
else{
key = e.which; //firefox
}
if(key == 13) {
$('input[name$="siteButton"]').click();
return false;
}
});
My setup: jQuery 1.6.2
I have this HTML
<textarea class="comment_box"> Write a comment...</textarea>
And the following Javascript
<script>
$('.comment_box').keydown(function (e){
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})
</script>
When I press the enter key in the textarea, nothing triggers
EDIT Oops, cut and paste error, I do have $ in my code and it still doesn't work, must be something else going on.
My bad, it is a user operator error, it does work. Sorry for the confusion.
$('.comment_box').keypress(function(event) {
// Check the keyCode and if the user pressed Enter (code = 13)
if (event.keyCode == 13) {
alert('you pressed enter ^_^');
}
});
Thats it
Check out this answer:
jQuery Event Keypress: Which key was pressed?
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
For jQuery you need to use the $ to specify.
$('.comment_box').keyd
should do it.
How to overwrite or remove key events, that is on a website? I'm writing a script for GreaseMonkey and I want to make event on Enter button, but when I press the ENTER button, it triggers function on website.
EDIT 1: Here is the website, that I need to do this http://lockerz.com/auth/express_signup
One of these two should do it for you. I used the first one, although someone on SO told me the second one will work also. I went for the hammer.
Sorry, first one wasn't a cut and paste answer. I use using it to return up/down arrow control on a website. I changed it so that it identifies keycode 13 instead.
(function() {
function keykiller(event) {
if (event.keyCode == 13 )
{
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
window.addEventListener('keypress', keykiller, true);
window.addEventListener('keydown', keykiller, true);
})();
Searching quickly on SO:
jQuery Event Keypress: Which key was pressed?
Code from there:
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
Without a library, use: http://jsfiddle.net/4FBJV/1/.
document.addEventListener('keypress', function(e) {
if(e.keyCode === 13) {
alert('Enter pressed');
return false;
}
});