Scroll Bar is moving to top when reaching maxlimit instead of stoping right there on textarea

Question

i am using inputTextArea. Actually i want to limit it's max length. I am using function like

<script type="text/javascript">
    function limitTextArea(element, limit) {
        if (element.value.length > limit) {
            element.value = element.value.substring(0, limit);
        }
    }
</script>

<textarea id="description" name="description" 
          onkeyup="limitTextArea(this, 1000);" 
          onkeydown="limitTextArea(this, 1000)">
</textarea>

But what is happening suppose i write a long text in the textarea. A scrollbar is shown in the textarea. But when i reach the maxlimit and then try to write a character then the textarea scrollbar move to top.

I want that once user reach it's max limit then the scrollbar as well as cursor stuck at that position.

Why it is behaving like textarea scrollbar move to top when i try to write something after max limit?

Thanks

It does not scroll to top as far as i understand look it here http://jsbin.com/ejacul/2/edit — Adil, May 02 '12 at 10:52
It is moving. set the length to 150 and then write to max limit. After that when you press the key you will see that it move you to top instead of just sticking right there. — Basit, May 02 '12 at 11:01
I might be missing something as I am not getting the problem check in different (latest) browser that may help — Adil, May 02 '12 at 11:07

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

Referred:How to impose maxlength on textArea in HTML using JavaScript

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA') 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  } 
}

edited May 23 '17 at 10:34

Community

1
1

answered May 02 '12 at 10:31

Ankur Verma

5,793
12
57
93

Hi thanks, but the text is limiting to max length but the text-area scroll-bar moves to top. Why is that so ? I want to stop text area scroll-bar from moving to top. Thanks – Basit May 02 '12 at 10:51
its is not scrolling................ ok may be you are getting some scroll.... try removing the alert..... may be it will work(not tried).... – Ankur Verma May 02 '12 at 10:58

score 0 · Answer 2 · answered May 02 '12 at 10:40

0

http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html

You can use this also to prevent the user from writing more than you want in a textarea.

answered May 02 '12 at 10:40

Ankur Verma

5,793
12
57
93

score 0 · Accepted Answer · edited May 23 '17 at 12:26

Atleast this code prevents my textarea from scrolling to top

jQuery(document).ready(function($) {
    $('textarea.max').keyup(function() {
        var $textarea = $(this);
        var max = 400;
        if ($textarea.val().length > max) {
            var top = $textarea.scrollTop();
            $textarea.val($textarea.val().substr(0, max));
            $textarea.scrollTop(top);

        }
    });

}); //end if ready(fn)

Here is the reference from which i got the idea to use it like this

How to prevent textarea from scrolling to the top when its value changed?

Better Solution:

jQuery(document).ready(function($) {
    var max = 400;
    $('textarea.max').keypress(function(event) {
        if (event.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing
        }

        if (this.value.length == max) {
            event.preventDefault();
        } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
    }); //end of keypress(fn)
}); //end if ready(fn)

Thanks

Scroll Bar is moving to top when reaching maxlimit instead of stoping right there on textarea

3 Answers3