Fixing the CFFORM Mask/Scroll problem

November 2, 2009 coldfusion javascript

(This post is more than 2 years old.)

Dave asks:

I have a question regarding masks.

I'm using which 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).