I have an HTML table with input text in every td. I'm trying to create a function that will allow arrow keys to navigate my td's.
I want to highlight the value of the selected cell when every arrow key is clicked, just like how tab works. Does anyone here have an idea how to achieve this? Thank you.
Code Here
You can find input separately, and add a class to Active input in function rePosition() as,
$('#navigate tr td').find('input').removeClass('yourClassforText');
$('#navigate tr td').eq(active).find('input').addClass('yourClassforText');
// to select text inside input
$('#navigate tr td').eq(active).find('input').select();
As mentioned another problem by Op, is to remove only selected text.
You need to add a check on a keydown event as,
var inp = String.fromCharCode(event.keyCode);
if (!(/[a-zA-Z0-9-_ ]/.test(inp) || event.keyCode == 96)){
//if user is entering some text, neglect rePosition & reCalculate events
}
select() in Jquery. answer updatedkeydown event, so its clearing previous value. Need to assign it explicitly. by the way, it could be different Question.. the answer is updated!You can get value. Use this code in re-position function:
alert($('#navigate tr td').eq(active).find('input').val());
