PDA

View Full Version : Mouse cursor positioning within textbox


vampiro
08-23-2006, 08:10 PM
Within Dreamweaver, after filling out one text box, how is the mouse cursor positioned in the next text box so the user starts filling it out and so on?

The cursor should automatically move to the next textbox after it has been filed out by user and so on.

What bahaviours are used?

Creative Insanity
08-23-2006, 09:36 PM
Nothing needed they just need to press tab or your their mouse.

vampiro
08-23-2006, 10:40 PM
I want it to automatically move to next text box without pressing the tab key. In a similar way to as someone is entering credit card information, a 16 digit number consisting of 4 text fields.

davidj
08-24-2006, 08:53 AM
here you are

change any vars you want to suit your needs

also you need to change the value .length to suit also

this example will focus on the next form field on the 5th input.

<script language="javascript" type="text/javascript">

function tab(){

var f1 = document.getElementById('textfield1');
var f2 = document.getElementById('textfield2');

if(f1.value.length > 4){

f2.focus();

}
}

</script>

notice the onKeyDown event below
<form id="form1" name="form1" method="post" action="">

<input name="textfield1" type="text" id="textfield1" onkeydown="tab()" />
<input name="textfield2" type="text" id="textfield2" />

</form>

this is a quick fix but you can make it allot better...
pass in the element ID and length value in an argument then just have the one variable but lots of form fields...

example.. im calling tab(1,2,3) but passing in..

1) the field im in
2) the length of value
3) the field to go to next

onkeydown="tab('textfield1', '10', 'textfield2')"

by calling the function this way you can use allot of fields with different lengths

function tab(e,c,t){

var f1 = document.getElementById(e);
var f2 = document.getElementById(t);

if(f1.value.length > c){

f2.focus();

}
}


this brings back memories coming from a data entry programming background

vampiro
08-24-2006, 09:05 PM
I tried the above method first on a new page which worked, I then used the coding with some changes on the main form page which also consists of coldfusion scripting and it would not seem to work properly.


Also regd the above code. what if i want to set focus to the maxlength of textbox before it moves to next one?

I came across some code, used it but that seems to not work properly either.

<script type="text/javascript">

function tabTo( cf, nf )
{
if ( cf.value.length == cf.getAttribute( 'maxlength' ) );
cf.form.elements[nf].focus();
}

</script>

<form name="myForm">
<input type="text" name="cc1" maxlength="4" size="4" onkeyup="tabTo(this,'cc2')">
<input type="text" name="cc2" maxlength="4" size="4" onkeyup="tabTo(this,'cc3')">
<input type="text" name="cc3" maxlength="4" size="4" onkeyup="tabTo(this,'cc4')">
<input type="text" name="cc4" maxlength="4" size="4">
</form>

With the above code it does however move focus to the next textbox depending on its max length only if you keep the key pressed down continously. If however you enter one number within the textbox, it will instantly move to next textbox thus previous textbox wil consist only of 1 digit when maxlength is set to 4. is there a fix for this? I am uploading the file. Also I am not that much of a javascript programmer, is there a way this can be acheived using dreamweaver?

vampiro
08-24-2006, 09:18 PM
Below is the function and coding within the form tag contained within fieldset tag. This is the coding that has been used with the cfm page with server side scripting. could anyone point out what the problem is and why the event is not working?


function tab()
{
var f1 = document.getElementById('profile_class');
var f2 = document.getElementById('switch_code');
var f3 = document.getElementById('lineloss_factor');
var f4 = document.getElementById('dist_id');
var f5 = document.getElementById('meterpoint_id');
var f6 = document.getElementById('check_digit');
if (f1.value.length > 2)
{
f2.focus();
}

else if (f2.value.length > 3)
{
f3.focus();
}

else if (f3.value.length > 3)
{
f4.focus();
}

else if (f4.value.length > 2)
{
f5.focus();
}

else (f5.value.length > 8)
{
f6.focus();
}
}


<fieldset>
<table width="100%">
<tr>
<td><table width="102%" border="1">
<tr>
<td width="4%"><span class="style9">S</span></td>
<td width="96%"><table width="100%" border="0">
<tr>
<td><table width="42%" border="0" align="center">
<tr>
<td width="11%"><label>
<input name="profile_class" type="text" id="profile_class" tabindex="1" value="" size="2" maxlength="2" onKeyDown="tab()">
</label></td>
<td width="14%"><label>
<input name="switch_code" type="text" tabindex="2" id="switch_code" size="3" maxlength="3" onKeyDown="tab()">
</label></td>
<td width="75%"><label>
<input name="lineloss_factor" type="text" tabindex="3" id="lineloss_factor" size="3" maxlength="3" onKeyDown="tab()">
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="58%" border="0" align="center">
<tr>
<td width="11%"><label>
<input name="dist_id" type="text" tabindex="4" id="dist_id" size="2" maxlength="2" onKeyDown="tab()">
</label></td>
<td width="32%"><label>
<input name="meterpoint_id" type="text" tabindex="5" id="meterpoint_id" size="8" maxlength="8" onKeyDown="tab()">
</label></td>
<td width="57%"><label>
<input name="check_digit" type="text" tabindex="6" id="check_digit" size="3" maxlength="3">
</label></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</fieldset>

davidj
08-25-2006, 07:48 AM
function tab(n)
{
var f1 = document.getElementById('profile_class');
var f2 = document.getElementById('switch_code');
var f3 = document.getElementById('lineloss_factor');
var f4 = document.getElementById('dist_id');
var f5 = document.getElementById('meterpoint_id');
var f6 = document.getElementById('check_digit');

if (f1.value.length > 1 && n ==1)
{
f2.focus();
}

if (f2.value.length > 2 && n ==2)
{
f3.focus();
}

if (f3.value.length > 2 && n ==3)
{
f4.focus();
}

if (f4.value.length > 1 && n ==4)
{
f5.focus();
}

if (f5.value.length > 7 && n ==5)
{
f6.focus();
}
}

<fieldset>
<table width="100%">
<tr>
<td><table width="102%" border="1">
<tr>
<td width="4%"><span class="style9">S</span></td>
<td width="96%"><table width="100%" border="0">
<tr>
<td><table width="42%" border="0" align="center">
<tr>
<td width="11%"><label>
<input name="profile_class" type="text" id="profile_class" tabindex="1" value="" size="2" maxlength="2" onKeyDown="tab('1')">
</label></td>
<td width="14%"><label>
<input name="switch_code" type="text" tabindex="2" id="switch_code" size="3" maxlength="3" onKeyDown="tab('2')">
</label></td>
<td width="75%"><label>
<input name="lineloss_factor" type="text" tabindex="3" id="lineloss_factor" size="3" maxlength="3" onKeyDown="tab('3')">
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="58%" border="0" align="center">
<tr>
<td width="11%"><label>
<input name="dist_id" type="text" tabindex="4" id="dist_id" size="2" maxlength="2" onKeyDown="tab('4')">
</label></td>
<td width="32%"><label>
<input name="meterpoint_id" type="text" tabindex="5" id="meterpoint_id" size="8" maxlength="8" onKeyDown="tab('5')">
</label></td>
<td width="57%"><label>
<input name="check_digit" type="text" tabindex="6" id="check_digit" size="3" maxlength="3">
</label></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</fieldset>