Ask a Jedi: Setting focus to a field inside cflayout - possible?
JC asks:
Have you had any success placing focus on a text field inside a cflayoutarea? Is this possible or am I chasing a red herring?
I had not tried this before, but it wasn't too hard. First consider a simple CFLAYOUT page:
<cflayout type="border"><cflayoutarea position="left" align="center"
size="400" collapsible="true" title="Menu">
<p>
Menu 1
</p>
<p>
Menu 2
</p>
<p>
Menu 3
</p>
</cflayoutarea>
<cflayoutarea position="center">
<p>
<form id="someform">
<input type="text" name="username" id="username">
</form>
</p>
</cflayoutarea>
</cflayout>
Notice I've placed a form inside the main layout box. I want to run code to set focus when the page loads, and ColdFusion provides a function for this - ajaxOnLoad():
<cfset ajaxOnLoad("setfocus")>The code for setfocus is no different than any other JavaScript code to set focus:
<script> function setfocus() { var myfield = document.getElementById("username"); myfield.focus(); } </script>The only thing to watch out for is that ajaxOnLoad is a bit picky. It requires your JS function to be inside <HEAD> tags. So a complete example would be:
<html> <head> <script> function setfocus() { var myfield = document.getElementById("username"); myfield.focus(); } </script> </head><body> <cflayout type="border">
<cflayoutarea position="left" align="center"
size="400" collapsible="true" title="Menu">
<p>
Menu 1
</p>
<p>
Menu 2
</p>
<p>
Menu 3
</p>
</cflayoutarea>
<cflayoutarea position="center">
<p>
<form id="someform">
<input type="text" name="username" id="username">
</form>
</p>
</cflayoutarea>
</cflayout>
<cfset ajaxOnLoad("setfocus")>
</body> </html>
Comments