JulioCapote

Web Application Developer

E-mail / AIM: jcapote@gmail.com

Arrow key navigation for text fields

Here is a class for enabling the use of arrow keys to navigate through a grid of input fields: (using mootools)

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:

var FM = new FocusMover('#mytable input', 4)