Dave asks:
I have a question regardingI wasn't quite sure what Dave meant, but I saw it quickly enough when I whipped up this demo:masks.
I'm usingwhich includes a few phone number entry fields. I'm applying a mask of "999-999-9999" (since it's all US phone numbers). The resulting HTML includes a CF generated script that focuses the cursor on any fields that contain a mask in order to apply it to the initial value.
Is there a way to disable this but retain the mask? My client is saying that the page "jumps" to the phone number fields instead of loading at the top of the page.
<h1>Ray</h1>
<cfoutput>#repeatString("<br/>",120)#</cfoutput>
<cfform name="form">
Telephone: <cfinput type="text" name="tel" mask="999-999-9999">
</cfform>
So this is a bit contrived, but it definitely shows the issue. On load, you will be scrolled down to the telephone. When I viewed source I could see the focus() calls added by CFFORM. From what I saw, if I were to have multiple fields with masks, I would probably end up at the lowest possible form field.
My fix was simple - and it seemed to work ok. I simply ran code on page load to scroll back to the top:
<html>
<head>
<script>
function init() {
window.scrollTo(0,0)
}
</script>
</head>
<body onload="init()">
<h1>Ray</h1>
<cfoutput>#repeatString("<br/>",120)#</cfoutput>
<cfform name="form">
Telephone: <cfinput type="text" name="tel" mask="999-999-9999">
</cfform>
</body>
</html>
I thought this would result in a 'jump' effect, but it seemed to just load and stay on top for me (FireFox 3.5).
Archived Comments
In IE 7 Ray shows up at the top of the screen, and the Telephone is a LONG way below the fold. the page Does not jump with the init() fix
I have run into this in the past and fixed it by adding a script block with the scroll call at the bottom of the page. It has fixed it for me.
Within a cfwindow, I can't get this suggestion to work.
I use the coldfusion.navigate() and coldfusion.window.show() to pop open a modal window when the user doubleclicks on a gridrow. The form comes up fine, but the focus is set to the fourth cfinput field in the window ... it's the only one that has a mask. I've tried the code suggested above in my code for the window (a separate .cfm template from the .cfm template that contains the grid). I've tried the <script> block at the top and at the bottom. I've tried the "onload" piece in the <body> tag and in the <cfform> tag. Nothing seems to work. The essence of my code is (with the javascript at the top):
<script type="text/javascript">
function init() {
window.scrollto(0,0);
}
</script>
<body onload="init()">
<cfoutput>
<cfform name="projectForm" onload="start()" >
<cfinput type="hidden" name="projectId" value="#url.projectId#" />
<div class="formElement">
<label for="projectName">Project Name:</label>
<cfinput id="projectName" name="projectName" value="#project.projectName#" size="20" />
<div id="projectNameError" class="error"></div>
</div>
... [two more cfinputs with no mask] ...
<div class="formElement" align="left">
<label for="projectStartDate">Start Date: </label>
<cfinput id="projectStartDate" name="projectStartDate" value="#dateformat(project.projectStartDate,'mm/dd/yyyy')#" size="12" mask="99/99/9999" />
<div id="projectStartDateError" class="error"></div>
</div>
... [several more cfinputs with no mask and a submit button] ...
</cfform>
</cfoutput>
</body>
Any suggestion on how to set focus on the first field (ProjectName) vs. the fourth field (projectStartDate) would be most welcome!
Well,I feel pretty stupid. The code above works fine when your FIRST input field is not a hidden one! Duh! hard to have focus on a hidden input field!
Moved that input field to the bottom of the form and it works just fine.
Hope someone else will benefit from my "discovery".