Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

javascript setfocus/cursor in the text field help plz

Status
Not open for further replies.
iis6newbie

iis6newbie

Technical User
Nov 22, 2003
54
US
Hello all,
Can someone help me with the following problem?

I have a text field for date input. The text field already had --/--/---- in there.

When user input 1, it should have something like 1-/--/---- . and the cursor should be next to 1.

I used functions onkeyup/onkeydown and window.event.keycode to get the key from keyboard.


var string = '--/--/----'
var key = window.event.keyCode
var num = key - 48 //convert to number 0-9
var index = string.indexOf('-')
var curValue = getElementIdBy"txtDate"].value
document.getElementIdBy["txtDate"].value= curValue.substring(0,index+1) + num + string.indexOf(10,index+1)

The problem is that the cursor moved to the end of the string.

I tried to set

window.event.keyCode = 37 in the loop to move the arrow to the left. But it just moved only one time. Because the flags did not change.

I have thought of toggling insert/overwritten key. by set window.event.keyCode=45, But it did not work.


Thanks for any suggestion or comments
 
Sort by date Sort by votes
As far as I know, you can only control the cursor position in Internet Explorer.
 
Upvote 0 Downvote
Not exactly what you wanted, but close:

<html>
<head>
<script language="JavaScript">
<!--
javascript:window.history.forward(1);
function formatDate(field)
{
var temp = field.value.replace(/[^0-9]/g, "");
var cursor = temp.length;

temp = temp.replace(/^(\d{0,2})(\d{0,2})(\d{0,4})/, "$1/$2/$3");

if (cursor < 11)
temp = temp.replace(/\s*x\s*$/, "");
if (cursor < 7)
temp = temp.replace(/\/\s*$/, "");
if (cursor < 3)
temp = temp.replace(/\/\s*$/, "");
if (! cursor)
temp = "";
if (cursor > 8)
temp = temp.substring(0,10);

field.value = temp;
return true;
}
--></script>
</head>
<body>
<form name=myform>
<input type="text" name="datevar" value="- - / - - / - - - -" onKeyUp="return formatDate(this)">
</form>
</body>
</html>
 
Upvote 0 Downvote
Well,
Thanks alot mbiro.

I will use your script for something else. But now I am still looking for a way to set a cursor.

You are very good in scripting.
 
Upvote 0 Downvote
This will work in Internet Explorer:

<html>
<head>
<script language="JavaScript">
<!--
function formatDate (field) {
if (field.createTextRange) {
var temp = field.value.replace(/[^0-9]/g, "");
var cursor = temp.length;
if (cursor == 1) {
temp = temp + '-/--/----';
cursorstart = cursor
}
if (cursor == 2) {
temp = temp + '/--/----';
cursorstart = cursor + 1;
}
if (cursor == 3) {
temp = temp.substring(0,2) + '/' + temp.substring(2,3) + '-/----';
cursorstart = cursor + 1;
}
if (cursor == 4) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/----';
cursorstart = cursor + 2;
}
if (cursor == 5) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,5) + '---';
cursorstart = cursor + 2;
}
if (cursor == 6) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,6) + '--';
cursorstart =cursor + 2;
}
if (cursor == 7) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,7) + '-';
cursorstart = cursor + 2;
}
if (cursor == 8) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,9);
cursorstart = cursor + 2;
}
if (cursor > 8) {
temp = temp.substring(0,8);
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,9);
cursorstart = cursor + 2;
}
cursorend = -temp.length+cursorstart+1
field.value = temp;
var r = field.createTextRange();
r.moveStart('character', cursorstart);
r.moveEnd('character', cursorend);
r.select();
return true;
}
}

--></script>
</head>
<body>
<form name=myform>
<input type="text" name="datevar" value="--/--/----" onKeyUp="return formatDate(this)">
</form>
</body>
</html>
 
Upvote 0 Downvote
Mbiro,
Thanks alot.

This is what I am looking for.
 
Upvote 0 Downvote
Some changes has been made, I post here in case someone will need

<html>
<head>
<script language="JavaScript">
<!--
function formatDate (field) {
var keycode = window.event.keyCode;
if ((field.createTextRange) && (keycode !=8) &&(keycode!=37)&&(keycode!=39) ){
var temp = field.value.replace(/[^0-9]/g, "");
var cursor = temp.length;

if (cursor == 1) {
temp = temp + '-/--/----';
cursorstart = cursor
}
if (cursor == 2) {
temp = temp + '/--/----';
cursorstart = cursor + 1;
}
if (cursor == 3) {
temp = temp.substring(0,2) + '/' + temp.substring(2,3) + '-/----';
cursorstart = cursor + 1;
}
if (cursor == 4) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/----';
cursorstart = cursor + 2;
}
if (cursor == 5) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,5) + '---';
cursorstart = cursor + 2;
}
if (cursor == 6) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,6) + '--';
cursorstart =cursor + 2;
}
if (cursor == 7) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,7) + '-';
cursorstart = cursor + 2;
}
if (cursor == 8) {
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,9);
cursorstart = cursor + 2;
}
if (cursor > 8) {
temp = temp.substring(0,8);
temp = temp.substring(0,2) + '/' + temp.substring(2,4) + '/' + temp.substring(4,9);
cursorstart = cursor + 2;
}
cursorend = -temp.length+cursorstart+1
field.value = temp;
var r = field.createTextRange();
r.moveStart('character', cursorstart);
r.moveEnd('character', cursorend);
r.select();

return true;
}

}

--></script>
</head>
<body>
<form name=myform>
<input type="text" name="datevar" value="--/--/----" onKeyUp="return formatDate(this)">
</form>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
787
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
912
xwb
xwb
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
391
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
381
Marclem
Marclem

Part and Inventory Search

Sponsor

Back
Top