Fixing the CFFORM Mask/Scroll problem

This post is more than 2 years old.

Dave asks:

I have a question regardingmasks.

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.
I wasn't quite sure what Dave meant, but I saw it quickly enough when I whipped up this demo: <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).

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Nick posted on 11/3/2009 at 5:52 AM

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

Comment 2 by Sean Coyne posted on 11/3/2009 at 6:17 PM

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.

Comment 3 by Les Schmidt posted on 12/13/2009 at 11:51 AM

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!

Comment 4 by Les Schmidt posted on 12/13/2009 at 12:06 PM

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".