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 developer advocate for HERE Technologies. He focuses on JavaScript, serverless 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