Solved

Textbox cursor position / Auto text

Posted on 2001-07-30
13
264 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

751 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