jQuery - Hotkey design question
Moderator: General Moderators
jQuery - Hotkey design question
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') ?
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') ?
Re: jQuery - Hotkey design question
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?
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Re: jQuery - Hotkey design question
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>Re: jQuery - Hotkey design question
I don't want to re-implement them. I want a single hotkey to do all of those at once.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?
Re: jQuery - Hotkey design question
ThanksOllie 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>
Re: jQuery - Hotkey design question
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 :
Use:
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") ...
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Re: jQuery - Hotkey design question
You can use :text for text fields.
Re: jQuery - Hotkey design question
I'm having some problems...
This is my HTML:
I'm running this JavaScript on it:
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.
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>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'));
});
});Re: jQuery - Hotkey design question
Check if the variable 'focused' contains the textarea you expect it to
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Re: jQuery - Hotkey design question
next(String), prev(String) and parent(String) are all kinda wank as functions because, taking next as an example:
So instead of these use siblings(String) and parents(String) for that kind of stuff.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.