Categories: MSDN / DotNet / Java / Scripts / Linux / PHP Ask - La ask - La Answer
Programmers Tech >> Developer Tech >> Web

cursor positioning within input boxes?

Is it possible when entering an input type=text to position the cursor
at the start of the input box?
This can be tricky if the input box already contains some value
and is not a problem when the input box is empty.
[232 byte] By [charlie] at [2007-11-9 16:12:06]
«« Changing the style of select box with CSS.
»» windows media player and netscape 6.1
# 1 Re: cursor positioning within input boxes?
If all users are browsing with Win32 version of IE, try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Cursor Example</title>
<script type="text/javascript">
function moveCursorToStart( obj ) {
var tr = obj.createTextRange();
tr.collapse(true);
tr.select();
}
</script>
</head>

<body>
<form>
<input type="text" id="txt" name="txt" onfocus="moveCursorToStart(this);"
value="text">
<input type="text" id="txt2" name="txt2" onfocus="moveCursorToStart(this);"
value="text">
</form>
</body>
</html>

"charlie" <charliewhite@excite.com> wrote:
>
>Is it possible when entering an input type=text to position the cursor
>at the start of the input box?
>
>This can be tricky if the input box already contains some value
>and is not a problem when the input box is empty.
Scott Bockelman at 2007-11-11 23:37:56 >
# 2 Re: cursor positioning within input boxes?
I just tried this solution and it did not work. Any other suggestions or recommendations. Does anyone know a Dreamweaver MX extension that covers this issue. I want my cursor to be placed in the beggining of the USERNAME Input field and ready for typing. My HTML is below with the suggested solution for review:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>William's Financial Group Advisor/Dealer Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">
<!--

function moveCursorToStart( obj ) {
var tr = obj.createTextRange();
tr.collapse(true);
tr.select();
}

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();

if (username=="###" && password=="????") {

window.location="brokers.html"; done=1; }
if (done==0) { alert("Invalid login!"); }
}
// End -->
//-->
</SCRIPT>
</head>

<body bgcolor="#999966">
<div align="center">
<table width="774" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3" valign="top" background="imagesHome/rulesLrg.gif">
<p><img src="imagesHome/wfglogo.jpg" alt="WFGlogo" width="105"

height="114"></p>

</td>
<td colspan="4" valign="top"><img src="imagesHome/top.jpg"

alt="WFGpeople" width="669" height="80"></td>
</tr>
<tr>
<td valign="top" bgcolor="#999966"> </td>
<td bgcolor="#999966"><font color="#999966">--</font></td>
<td valign="top" bgcolor="#999966"> <p> </p>
<center>

<form name=login>
<table width=225 border=0 align="left" cellpadding=3>
<tr>
<td colspan=2><div align="left">
<p><font color="#FFFFFF" size="2" face="Arial,

Helvetica, sans-serif"><b>William's
Financial Group<br>
Members-Only Login:</b></font></p>
</div></td>
</tr>

<tr>
<td><div align="left"><font size="2" face="Arial, Helvetica,

sans-serif">Username:</font></div></td>
<td><div align="left"> <font size="2" face="Arial,

Helvetica, sans-serif">
// <input name=username onfocus="moveCursorToStart(this);" type=text>
<input type=text id="txt" name=username onfocus="moveCursorToStart(this);">
</font></div></td>
</tr>
<tr>
<td><div align="left"><font size="2" face="Arial, Helvetica,

sans-serif">Password:</font></div></td>
<td><div align="left"> <font size="2" face="Arial,

Helvetica, sans-serif">
<input type=text name=password>

</font></div></td>
</tr>
<tr>
<td colspan=2 align=center><div align="left"> <font size="2"

face="Arial, Helvetica, sans-serif">
<input type=button value="Login!" onClick="Login()">
</font></div></td>
</tr>
</table>
</form>
</center>

<p align="left">
<p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">

</font></p>
</td>
<td bgcolor="#999966"> </td>
</tr>
<tr>
<td bgcolor="#999966"> </td>
<td bgcolor="#999966"> </td>

<td bgcolor="#999966"> </td>
<td bgcolor="#999966"> </td>
</tr>
</table>
<p> </p>
</div>
<p align="center"> </p>
</body>
</html>
crmackenzie at 2007-11-11 23:38:50 >
# 3 Re: cursor positioning within input boxes?
Take a look at this page and see if it will help you.

http://www.psacake.com/web/gc.asp
chqdzn at 2007-11-11 23:39:54 >
# 4 Re: cursor positioning within input boxes?
THANKS!!! I new it had to be simple. It works exactly as advertised.
crmackenzie at 2007-11-11 23:41:00 >
# 5 Re: cursor positioning within input boxes?
Glad to help!!!
chqdzn at 2007-11-11 23:41:55 >
Developer Tech
Web

Developer Tech

All Classified

Developer Tech New Topic

Developer Tech Hot Topic