Solved

Textbox cursor position / Auto text

Posted on 2001-07-30
13
260 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
Industry Leaders: 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

Industry Leaders: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to get total count of passed in subject based on marks? 7 32
Timer on div 5 24
Jquery if else not working ... WHY? 5 25
javascript and jquery question 4 22
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

749 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