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> </code>
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> </code>
Comments