johnaregan
Programmer
- Mar 13, 2001
- 87
This relates to a problem I came across when using the tab key to move the focus around a page of text boxes. All textboxes have AutoPostBack set to true and the page also has SmartNavigation switched on.
When you change a value in a text box and tab out, the page is posted back as expected. A user would expect that the focus would change to the next field in the tab order as it does when SmartNavigation is not switched on, but it does not. Instead the focus returns to the changed text box, even if you put the usual asp code in the body tag:
Looking through the SmartNav.js script is this line:
The restoreFocus function puts the cursor back to the original field and the javascript function setTimeout makes sure it is executed last as the page loads. This explains why the body tag code does not work and also why you can see the cursor flicking briefly to the correct field.
Client Side
To workaround this just use this javascript in the <head> tag. The delay of 1 millisecond makes sure that FocusHere is fired after the restoreFocus function above has run which has it's delay set to 0 milliseconds:
Server Side
You can write a method on the server side called GotoThisTextBox() which returns the ID of the text box that you want to set the focus of and so sets the value in the client side script above. elPost is a class member variable which can be set anywhere in the code:
At the moment, I am setting the value of it in the TextChanged event of the TextBox control.
So, for example, if TextBox1 has changed value, then the TextBox1_TextChanged method will fire on the server side and in the method I have set the value of elPost to TextBox2 (there is probably a better way of setting the value of elPost based on a page tab order).
When you change a value in a text box and tab out, the page is posted back as expected. A user would expect that the focus would change to the next field in the tab order as it does when SmartNavigation is not switched on, but it does not. Instead the focus returns to the changed text box, even if you put the usual asp code in the body tag:
Code:
document.getElementById('NextField').focus();Looking through the SmartNav.js script is this line:
Code:
window.setTimeout(sn.restoreFocus,0);Client Side
To workaround this just use this javascript in the <head> tag. The delay of 1 millisecond makes sure that FocusHere is fired after the restoreFocus function above has run which has it's delay set to 0 milliseconds:
Code:
<script language=javascript id="noHereScript">
window.setTimeout('FocusHere();', 1);
function FocusHere()
{
var el = document.getElementById(<%=GotoThisTextBox()%>);
el.focus();
}
</script>You can write a method on the server side called GotoThisTextBox() which returns the ID of the text box that you want to set the focus of and so sets the value in the client side script above. elPost is a class member variable which can be set anywhere in the code:
Code:
public class WebForm1 : System.Web.UI.Page
{
protected string elPost;
....
protected string GotoThisTextBox()
{
return "'" + elPost + "'";
}At the moment, I am setting the value of it in the TextChanged event of the TextBox control.
So, for example, if TextBox1 has changed value, then the TextBox1_TextChanged method will fire on the server side and in the method I have set the value of elPost to TextBox2 (there is probably a better way of setting the value of elPost based on a page tab order).