asked on

Textbox cursor position / Auto text

Is there a way to get / set the position of the cursor in a textbox?

The reason I ask:

I wish for the textbox to be automatically populated with some text @ the beginning of the box. I do not want the user to be able to modify this, only what they type.

ie:

textbox contents:

city of: Toronto, Canada
^^^^^^^^^
cannot edit

BTW: this is the code that I have so far.. but it does not work correctly (ie. when more than 1 character is removed a a time.. or from anywhere but the end)

<html>

<script language=javascript>
var typedtext = ""
var nopress = false

function press (e)
{
var charCode = (navigator.appName == "Netscape") ? e.which : e.keyCode

typedtext += String.fromCharCode (charCode)
status = String.fromCharCode (charCode)

document.form1.test.value = "City of: " + typedtext

status = String.fromCharCode (charCode)
return false
}

function down (e)
{
var charCode = (navigator.appName == "Netscape") ? e.which : e.keyCode
status = charCode
if (charCode == 8)
{
if (typedtext.length != 0)
{
status = typedtext
typedtext = typedtext.slice (0, -1)
status = typedtext
document.form1.test.value = "City of: " + typedtext
}
else
return false
}
}
</script>

<body>
<form name="form1">
<input type=text name="test" onkeypress="return press(event)" onkeydown="return down(event)">

</form>
</body>
</html>

THANX!
The Dark Jedi

a.marsh

Why do you want to do it that way? It only seems to make it more difficult for yourself.

Why not do it like this:

<html>
<head>
<script language="javascript">

</script>
</head>
<body>
<form name="form1" onSubmit="this.test.value = 'city of : ' + this.test.value;">
city of : <input type=text name="test"><br><br>
<input type="submit">
</form>
</body>
</html>

Ant

webwoman

And if you don't want the user to be able to edit it, why not just display it as regular HTML text, and have a hidden form field that has the info that gets passed on?

IMHO, it's totally confusing to the user to be shown something that seems like it should be editable, but isn't.

FYI -- if they have javascript off or a non-javascript enabled browser (which some braille/reader browser are) they'll be able to edit it anyway...

a.marsh

Isn't that what my code essentially does webwoman?!?!?

:oP

Ant

a.marsh

It's just the first part of the text that should not be edited.

:o)

Ant

d_jedi

ASKER

I'm gonna answer everything in one comment:

This is the way that I wish to do this is because in the site that I am developing, I do not want the users of this site to be confused and think they must type "City of: " themselves.

This is more important in a PIN number field, where all #s have the prefix P.I.N.

I do not want to display it as regular HTML text, because there is no room left on the screen to place it (I'm developing for 800x600 here :->)

Javascript not being enabled is not an issue, because the site cannot be used at all (can't get past the login screen :->) without it. (FYI: the site is designed to be cross platform, for the latest versions of IE and NS)

Hmm.. unless, of course, they disable javascript just for the time that they are typing in that field.. but I highly doubt anyone would go to such lengths.

My solution - if it is indeed possible to do what I want - is not the simplest, but I do believe it is the best.

webwoman

If your user needs to type in an address (which I'm assuming this is, if it has 'City of' ) you still need to label the fields so they know what goes where. If you put want 'City of' in the entry, add it in a script AFTER the field is filled in. There's no reason to put it in the field at all.

If you have enough room for the form field, you have enough room for a label for it -- put it above/below the actual form field.

ASKER CERTIFIED SOLUTION

a.marsh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

d_jedi

ASKER

Here's my modified version of your code.

(problem with your code was that spaces / text could be inserted inside the restricted starting value)

Still not perfect, but progress :->

<html>
<head>
<script language="javascript">

</script>
</head>
<body onload="document.forms[0].city.value = startText; document.forms[0].city.focus();">
<form>
<input type="text" name="city" value="" onkeydown="return checkText(this);" onkeyup="check(this)">
</form>
</body>
</html>

a.marsh

The problem you will get is with the different onkey events - Netscape only usually works with the onkeyup...

:o)

Ant

d_jedi

ASKER

Eureka! I think I've finally got it!

Works in both NS6 and IE5 (only browsers I need to worry bout)

PLS send any comments / report any errors:

<html>
<head>
<script language="javascript">

</script>
</head>
<body onload="document.forms[0].city.value = startText; document.forms[0].city.focus();">
<form>
<input type="text" name="city" value="" onkeydown="return checkText(this);" onkeyup="check(this)">
</form>
</body>
</html>

a.marsh

Yep, works fine in IE 5.5 and Netscape 6.01 on my machine.

You've obviously built upon my code form earlier, so please feel free to wrap this question up. :o)

Ant

d_jedi

ASKER

This is not exactly what I was looking for, but it provided the foundation for me to develop the code.

a.marsh has been very helpful.

a.marsh

Glad to have helped.

Thanks for the A grade - very generous of you. :o)

Ant