jQuery - Hotkey design question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

jQuery - Hotkey design question

Post by nutkenz »

Here's my situation: I need multiple form fields on a single page and when a hotkey is pressed, the currently focused fields content should be copied to the next one. I'm wondering what the best way to do this would be; is it possible to emulate other keyboard events? For example: I could call CTRL + A to select content in the active field, CTRL + C to copy it, TAB to select the next field and CTRL + V to paste. Is that a good method? How could I implement it (calling hotkeys from the code)?

Another possible way of doing it would be to find the selected field, though I'm not exactly sure how... Would this be something like $('input:focus') ?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery - Hotkey design question

Post by Eran »

What you are describing is the browser natural behavior (supporting ctrl+a, ctrl+v, tabbing from field to field etc). Is there a reason you want to re-implement this in Javascript?
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Re: jQuery - Hotkey design question

Post by Ollie Saunders »

Code: Select all

<input id="foo"/>
<input id="bar"/>
<script type="text/javascript" src="file:///Users/ole/pap/code/js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function() {
    var focused
    $('*').focus(function() { focused = this })
    $('*').blur(function() { focused = null })
    $('html').keypress(function(event) {
        // 120 == 'x'
        if (event.charCode == 120 && event.ctrlKey && focused) {
            $('#bar').val(focused.value)
        }
    })
})
</script>
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Re: jQuery - Hotkey design question

Post by nutkenz »

pytrin wrote:What you are describing is the browser natural behavior (supporting ctrl+a, ctrl+v, tabbing from field to field etc). Is there a reason you want to re-implement this in Javascript?
I don't want to re-implement them. I want a single hotkey to do all of those at once.
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Re: jQuery - Hotkey design question

Post by nutkenz »

Ollie Saunders wrote:

Code: Select all

<input id="foo"/>
<input id="bar"/>
<script type="text/javascript" src="file:///Users/ole/pap/code/js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function() {
    var focused
    $('*').focus(function() { focused = this })
    $('*').blur(function() { focused = null })
    $('html').keypress(function(event) {
        // 120 == 'x'
        if (event.charCode == 120 && event.ctrlKey && focused) {
            $('#bar').val(focused.value)
        }
    })
})
</script>
Thanks :) will use this in combination with the hotkeys jquery plug-in.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery - Hotkey design question

Post by Eran »

I see. You don't to call the hotkeys to all the actions to do so, just implement all the actions in normal javascript (retrieve values, set them where you desire etc.)
There is no :focus selector currently in jQuery, however there is a plugin that provides such a selector (and more) - http://www.softwareunity.com/sandbox/JQ ... Selectors/. If you want just the :focus selector, you can look for it in the source and implement only that. I think its better than to add events to all the elements in the page, or at least limit the event attachments to relevant selectors only.

Instead of :

Code: Select all

 
$('*') ...
 


Use:

Code: Select all

 
$("input[type='text'],textarea") ...
 
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Re: jQuery - Hotkey design question

Post by Ollie Saunders »

You can use :text for text fields.
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Re: jQuery - Hotkey design question

Post by nutkenz »

I'm having some problems...

This is my HTML:

Code: Select all

<textarea id="sug_crit" name="sug_crit">text</textarea>
<textarea id="app_crit_prev_94150" name="app_crit_prev" style="display:none"></textarea>
<textarea id="app_crit_94150" name="app_crit" class="app_crit"></textarea>
I'm running this JavaScript on it:

Code: Select all

$(document).ready(function(){
    var focused;
    $('textarea').focus(function() { focused = this });
    $('textarea').blur(function() { focused = null });
    $.hotkeys.add('Alt+down',function(){
        alert($(focused).next('.app_crit').attr('id'));
    });
});
I would expect to get an alert containing the string "app_crit_94150", but instead I'm getting "undefined"... The issue seems to be in selecting the next textarea with class .app_crit using jquery's next() function.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: jQuery - Hotkey design question

Post by Eran »

Check if the variable 'focused' contains the textarea you expect it to
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Re: jQuery - Hotkey design question

Post by Ollie Saunders »

next(String), prev(String) and parent(String) are all kinda wank as functions because, taking next as an example:
JQuery Documentation wrote: Get a set of elements containing the unique next siblings of each of the matched set of elements, and filtered by an expression. It only returns [which is a bad way of saying - it only only searches] the very next sibling, not all next siblings.
So instead of these use siblings(String) and parents(String) for that kind of stuff.
Post Reply