Hi
Being tested using FF 3 on WAMP server. I have spent a number of hours trying to figure this out myself.
I have a html form using table cells and had a request to enable the arrow keys on a keyboard to move through the cells. I found some code and adapted it, and it works well now. Arrow keys move the cursor exactly to the correct cell. There are two things I can't do which I was hoping you guys would give me some help on. I am a javascript novice and would be so grateful for some help.
I have posted the code below. My two questions are
1) If I arrow right, and there's some text in the next cell, the cursor lands at the end. How can I make it land at the beginning of the text? (Curiously, if I use IE8, the cursor seems to land at the beginning. I guess I'd like to force it to land at the beginning regardless of browser.)
2) Once the cursor is at the beginning of that cell with text in it, what modification should I make so that when I arrow right, the cursor moves through the text character by character rather than jumping to the next cell? - <table>
-
<tr>
-
<td><input type='text' id='1c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='1c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='1c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='2c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='2c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='2c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='3c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='3c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='3c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
-
<td><input type='text' id='4c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='4c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='4c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='5c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='5c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='5c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='6c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='6c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='6c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
</table>
-
<script language="javascript">
-
-
function keyPressed(TB, e)
-
{
-
if (e.keyCode == 40 || e.keyCode == 13) { // arrow down
-
if (TB.split("c")[0] < 6)
-
document.getElementById(eval(TB.split("c")[0] + '+1') + 'c' + TB.split("c")[1]).focus();
-
if (TB.split("c")[0] == 6)
-
document.getElementById(1 + 'c' + TB.split("c")[1]).focus();
-
}
-
-
if (e.keyCode == 38) { // arrow up
-
if(TB.split("c")[0] > 1)
-
document.getElementById(eval(TB.split("c")[0] + '-1') + 'c' + TB.split("c")[1]).focus();
-
if (TB.split("c")[0] == 1)
-
document.getElementById(6 + 'c' + TB.split("c")[1]).focus();
-
}
-
-
if (e.keyCode == 37) { // arrow left
-
if(TB.split("c")[1] > 1)
-
document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '-1')).focus();
-
if (TB.split("c")[1] == 1)
-
document.getElementById(TB.split("c")[0] + 'c' + 3).focus();
-
}
-
-
if (e.keyCode == 39) { // arrow right
-
if(TB.split("c")[1] < 3)
-
document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '+1')).focus();
-
if (TB.split("c")[1] == 3)
-
document.getElementById(TB.split("c")[0] + 'c' + 1).focus();
-
}
-
}
-
-
</script>
4 6285
Hi,
I did some changes I found it to be working. Please post back if you have any problem in that
javascript :
HTML Code - <table>
-
<tr>
-
<td><input type='text' id='1c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='1c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='1c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='2c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='2c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='2c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='3c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='3c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='3c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='4c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='4c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='4c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='5c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='5c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='5c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
<tr>
-
<td><input type='text' id='6c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='6c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
<td><input type='text' id='6c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
-
</tr>
-
</table>
Thanks and Regards
Ramanan Kalirajan
Hi RamananKaliraja n
Thanks for your work on this. It's fantastic. It now works perfectly in IE. However, it doesn't work in FF, Safari, Chrome or Opera. I should note that the up/down arrowing works fine. It's the left/right arrowing that is the problem. Obviously I'd like to have it working in them too, or it won't be viable. I've included the error message for each browser below. If you know of a way to fix these I'd appreciate it.
FF3.5.2: document.select ion is undefined
Chrome 2.0: cannot call method 'CreateRange' of undefined
Safari: Result of expression 'document.selec tion' [undefined] is not an object
Opera: Statement on line 9: Type mismatch (usually non-object value supplied where object required)
Backtrace:
Line 9 of inline#1 script in http://localhost/test3.php: In function GetCursorPositi on
while (cur.compareEnd Points("StartTo Start", tr) > 0) {
Line 98 of inline#1 script in http://localhost/test3.php: In function keyPressed
if(0!=GetCursor Position())
Line 1 of function script
keyPressed(this .id,event)
acoder 16,027
Recognized Expert Moderator MVP
The cursor position code is incorrect. See ths thread for a better script.
Thanks Acoder. That link was really awesome. I got the solution for detecting cursor position in all the browsers. Thanks again
Thanks and Regards
Ramanan Kalirajan
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Darren Oakey |
last post by:
ok - the problem - I made a simple breakout game out of a form, just
painting the background - and using keydown for left and right arrow keys to
control the bat - worked fine.
I then moved all the code into a user control, put it on the form. Now I
don't get keydown events when I press an arrow key - on either the form or
the usercontrol ?!!!?
I suspect somehow the container fucntionality has decided that they are was
of migrating...
|
by: Neil Wallace |
last post by:
Hi there,
I have an application in which a grid of 100 or more buttons are put on a
form in columns of 10.
All the buttons are within a panel.
They are added in runtime, and so they adopt a sensible tab value.
The tab key moves the focus down the column one by one, and the up and down
arrow keys work well.
|
by: Rlrcstr |
last post by:
How can you detect when an arrow key gets pressed? Doesn't seem to trigger
a KeyPress or KeyDown event. Thanks.
Jerry
|
by: Phil Galey |
last post by:
I have a Panel control docked on all sides on a form and the panel control
contains a PictureBox. I'm using the KeyDown event of the form to respond to
the and keys for resizing the image and the PageUp, PageDn, Home,
End, and arrow keys for scrolling the Panel control.
Resizing the image using the and keys works fine, deriving a resized
thumbnail from the image and reassigning it to the Image property of the
PictureBox. However I'm...
|
by: jonefer |
last post by:
I tried all sorts of key combinations.
How do I precisely move controls, such as labels or textboxes with the arrow
keys?
I notice that new labels or boxes only have 2 handles on them, - these
controls I can't even move with my mouse.
| |
by: Vincent |
last post by:
Hi,
I have a user control that needs to trap the arrow keys to move items
around internally. However, using the arrow keys will move the focus to
another control on the form hosting the user control.
How do I stop this?
Vincent.
|
by: Martijn Mulder |
last post by:
/*
I have problems detecting the Arrow Keys on a User Control. A control
derived from System.Windows.Forms.Control neglects 'bare' Arrow Keys
but does react on the combination <Altor <Ctrl+ Arrow Key. The code
below shows what I mean. How can I cure this? (excuse me for the line
breaks)
*/
|
by: Martijn Mulder |
last post by:
/*
I override IsInputKey() to direct the Arrow Keys (Cursor Keys) to my
custom System.Windows.Forms.Control. But, holding down the Shift-Key
prevents the Arrow Keys from coming through.
How can I intercept the Arrow Keys when holding down the Shift Key?
*/
|
by: boopsboops |
last post by:
Hi thescripts people, I hope I'm in the right forum for Visual Basic Dotnet (VS 2005).
I am trying to make a custom control in which you can nudge a point around using the arrow keys. Actually, the control is meant to be a simple drawing program. To test it out I have put the control on a Windows form which also contains several buttons.
I have added a KeyDown event handler to the custom control (see code below). It responds fine to keys...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |