diff options
| author | Julio Capote <jcapote@gmail.com> | 2023-01-24 03:20:47 +0000 |
|---|---|---|
| committer | Julio Capote <jcapote@gmail.com> | 2023-01-24 03:20:47 +0000 |
| commit | f24f2d15275961f1c0144e68fde75a60aeaaa165 (patch) | |
| tree | 38be1626f3ade436fbd17eadb2753fa2f0effb37 /content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown | |
| parent | bf04383b34c4a4fdfe239de2805a30a051921002 (diff) | |
| download | capotej.com-f24f2d15275961f1c0144e68fde75a60aeaaa165.tar.gz | |
move to bear theme
Diffstat (limited to 'content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown')
| -rw-r--r-- | content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown | 77 |
1 files changed, 0 insertions, 77 deletions
diff --git a/content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown b/content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown deleted file mode 100644 index 0f2df9e..0000000 --- a/content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: "Arrow key navigation for text fields" -date: 2008-10-12T17:41:00Z -comments: false -url: /post/54266325/arrow-key-navigation-for-text-fields -tags: ---- - - - -Here is a class for enabling the use of arrow keys to navigate through a grid of input fields: (using mootools) - -<!--more--> - - -```javascript -var FocusMover = new Class({ - - initialize: function(sel, col_num){ - - this.sel = sel - this.col_num = col_num - this.inputs = $$(this.sel) - this.current_focus = 0 - - var self = this - - this.inputs.each(function(item, index){ - item.addEvent('keydown',function(key){ - $try(function(){ - self[key.key]() - }) - }) - item.addEvent('focus',function(e){ - self.refresh(e) - }) - - item.set('myid', index) - }) - - this.inputs[0].focus() - - }, - - - refresh: function(e){ - this.current_focus = e.target.get('myid') - }, - - down: function(){ - i = parseInt(this.current_focus) + parseInt(this.col_num) - this.inputs[i].focus() - }, - - up: function(){ - i = parseInt(this.current_focus) - parseInt(this.col_num) - this.inputs[i].focus() - }, - - left: function(){ - i = parseInt(this.current_focus) - 1 - this.inputs[i].focus() - }, - - right: function(){ - i = parseInt(this.current_focus) + 1 - this.inputs[i].focus() - } - -}) -``` - -As you can see, the constructor takes two arguments: a selector (which should return a list of all your input fields), and the number of input field columns. So for a 4x2 table, you would set it up like this: - -```javascript -var FM = new FocusMover('#mytable input', 4) -``` |