CODEWITHSUNDEEP
javascripthtmlcssscrolltextarea
Chris
Chris

Reputation: 313

Prevent window scrolling on backspace in textarea

I have a simple textarea going outside of the browsers window size as shown below. When a user adds some text, the window always scrolls to the cursor's position. So if the cursor jumps out of the window, the window scrolls to its bottom. So how can I get it to don't scroll at all (cursor should go out of visible windows)?

a busy cat 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style>
        textarea{
            margin-top: 500px;
            padding: 0;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        function keypressed(el,event) {
            if(event.keyCode == 8){
                event.preventDefault();
            } else {
                el.value = el.value + String.fromCharCode(event.keyCode);
            }
            return false;
        }
    </script>
</head>
<body class=noscroll">
    <textarea onkeypress="keypressed(this,event);return false;" rows="5"></textarea>
</body>
</html>

So far, I used fixed positioning for the textarea and there no scrolling will ever appear. Since iOS is not able to display fixed positioning in a proper way I tried with absolute positioning as shown above. I added some onkeypressed code to prevent scrolling on any input and this works but not on BACKSPACE (keycode == 8). Once the cursor is out of the window and backspace is hit, the window scrolls again to the cursor's position.

Is there a easier way to reach the goal or did I miss something?

Thanks for any hints.

Upvotes: 0

Views: 778

Answers (1)

Harry F Wong
Harry F Wong

Reputation: 34

After looking at the javascript console - you have an error in your tag.

What are you trying to accomplish here? onkeydown="onkeydown(this,event);"

Uncaught RangeError: Maximum call stack size exceeded

Upvotes: 0

Related Questions