how do you prevent page scroll in textarea on mobile safari

Question

I am trying to make a little note pad app for mobile safari for funzies but so far it doesn't seem to be working out. I want to prevent page scrolling so it doesn't have the rubberband and feel like a webapp but to do this I am using:

document.ontouchmove = function(e){
    alert("calling prevent default");
    e.preventDefault(); 
}

This works great except for in textarea where it looks like ontouchmove never gets fired so page scrolling still happens. Has anyone figured out how to change apple's default functionality in the text area or figured out an alternative to text area that doesn't have apple's default functionality?

Answer 1

There does not appear to be a good solution at this time. I found a project that is struggling with this problem as well and folks have gotten creative with hidden spans over text fields but that is still pretty buggy for me.

http://code.google.com/p/iscroll-js/issues/detail?id=24

I guess this is just a limitation to mobile safari as there doesn't appear to be a good solution that I can find at this time.

Answer 2

I read somewhere that putting your content in a < div> with "overflow:hidden" and setting the height of the div should prevent scrolling. Please tell us if it works.