Solved

Textbox cursor position / Auto text

Posted on 2001-07-30
13
251 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:d_jedi
  • 7
  • 4
  • 2
13 Comments
 
LVL 15

Expert Comment

by:a.marsh
ID: 6336116
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
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6336393
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...
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6336899
Isn't that what my code essentially does webwoman?!?!?

:oP

Ant
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6336900
It's just the first part of the text that should not be edited.

:o)

Ant
0
 

Author Comment

by:d_jedi
ID: 6337939
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.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6339928
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.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 15

Accepted Solution

by:
a.marsh earned 200 total points
ID: 6339989
Okay, this is the closest I have managed to get so far:

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

startText = "city of: ";
minLength = startText.length;

function checkText(textObj){
  if(textObj.value.length < minLength){
    textObj.value = startText;
    textObj.focus();
  }
}

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

It does exactly what you want in IE and Netscape - the only issue being in Netscape that it always puts the cursor to the beginning of the text.

Ant
0
 

Author Comment

by:d_jedi
ID: 6341738
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">
<!--


function differsAt (str1, str2)
     {
     var i
     var char1
     var char2
     var max = (str1.length > str2.length) ? str1.length : str2.length
     
     for (i=0;i<max;i++)
          {
          char1 = str1.charAt(i)
          char2 = str2.charAt(i)
         
          if (char1 != char2)
               return i
          }
     
     return -1
     }

startText = "city of: ";
minLength = startText.length;
oldvalue = startText

function checkText(textObj)
     {
     if(textObj.value.length < minLength)
          {
          textObj.value = startText;
          textObj.focus();
          }
         
     oldvalue = textObj.value
     }

function check(textObj)
     {
     val = differsAt (startText, textObj.value)
     if ( val < startText.length && val != -1)
          textObj.value = oldvalue
     }

//-->
</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>
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6341811
The problem you will get is with the different onkey events - Netscape only usually works with the onkeyup...

:o)

Ant
0
 

Author Comment

by:d_jedi
ID: 6345587
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">
<!--
var no = 0

function differsAt (str1, str2)
     {
     var i
     var char1
     var char2
     var max = (str1.length > str2.length) ? str1.length : str2.length
     
     for (i=0;i<max;i++)
          {
          char1 = str1.charAt(i)
          char2 = str2.charAt(i)
         
          if (char1 != char2)
               return i
          }
     
     return -1
     }

startText = "city of: ";
minLength = startText.length;
oldvalue = startText

function checkText(textObj)
     {
     if(textObj.value.length < minLength)
          {
          textObj.value = startText;
          textObj.focus();
          }

     val = differsAt (startText, textObj.value)

     if ( val < startText.length && val != -1)
          textObj.value = oldvalue
     else
          oldvalue = textObj.value
     }

function check(textObj)
     {
     val = differsAt (startText, textObj.value)
     if ( val < startText.length && val != -1)
          {
          status = textObj.value.length
          if (textObj.value.length != 0)
               textObj.value = oldvalue
          else
               textObj.value = startText
          }
     }

//-->
</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>

0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6346717
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
0
 

Author Comment

by:d_jedi
ID: 6349157
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.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6349710
Glad to have helped.

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

Ant
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now