diff options
| author | Julio Capote <jcapote@gmail.com> | 2018-11-06 03:03:41 +0000 |
|---|---|---|
| committer | Julio Capote <jcapote@gmail.com> | 2018-11-06 03:03:41 +0000 |
| commit | 4b489a049a0063bbb1fd9f0c0f74ce1ee9f87a86 (patch) | |
| tree | 98af5707e30150af482e297bed9cd4e9b5477e6a /content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown | |
| parent | a62a3e7755579d93ce3a87243dd277575930fffe (diff) | |
| download | capotej.com-4b489a049a0063bbb1fd9f0c0f74ce1ee9f87a86.tar.gz | |
import old posts
Diffstat (limited to '')
| -rw-r--r-- | content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown | 75 |
1 files changed, 75 insertions, 0 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 new file mode 100644 index 0000000..6fcf882 --- /dev/null +++ b/content/post/2008-10-12-arrow-key-navigation-for-text-fields.markdown @@ -0,0 +1,75 @@ +--- +layout: post +title: "Arrow key navigation for text fields" +date: 2008-10-12T17:41:00Z +comments: false +permalink: /post/54266325/arrow-key-navigation-for-text-fields +categories: +--- + + + +Here is a class for enabling the use of arrow keys to navigate through a grid of input fields: (using mootools) + +```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) +``` |