I'm currently working with a jQuery script:
$(document).ready(function() {
//Focus the first field on page load
$(':input:enabled:visible:first').focus();
//Clear all fields on page load
$(':input').each(function() {
this.value = "";
});
});
//Clear field on focus
$('input').focus(function() {
this.value = "";
});
//Allow only alphabetical characters in the fields
$(':input').bind("keypress", function(event) {
if (event.charCode != 0) {
var regex = new RegExp("^[a-zA-Z]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
$(this).next('input').focus();
}
});
//Enumerate submit click on [ENTER]-keypress
$(':input').keypress(function(e) {
if (e.which == 13) {
jQuery(this).blur();
jQuery('#submit').click();
}
});
//Submit form
$('#submit').click(function() {
//Show loading image while script is running
$("#response").html("<img src='../images/loader.gif'>");
//POST fields as array
function serealizeInputs(input) {
var array = [];
input.each(function() {
array.push($(this).val())
});
return array;
}
var letters = serealizeInputs($('.letters'));
$.post('loadwords.php', {
letters: letters
}, function(data) {
//Show the response from loadwords.php
$("#response").html(data);
});
});
Check out the code here: http://jsfiddle.net/8S2x3/1/
I'm looking to improve its efficiency, but not sure where to start.
Most of the code I've used is a result of copying and modifying existing code, as I am still learning.
Now, my questions are: 1. How can I move focus to the previous textfield on a Backspace keypress? I want users to be able to erase a character if they mistype, and then automatically move the focus to the previous input field by pressing backspace again. 2. Also, I'm curious about how to add a CSS class when a field has a value, and add another CSS class when it's empty.