CODEWITHSUNDEEP
htmlcss
Naor
Naor

Reputation: 24053

textarea disable scroll by up/down arrows

I have textarea with overflow: hidden; style.
But, whenever I press on the up/down arrows, the textarea scrolls a bit.
Is there any way to disable this scroll?

Here is jsfiddle: http://jsfiddle.net/6bV3W/

If you press up and down keys the text is moved.

textarea {
        border: 1px solid black;
        width: 160px;
        height: 60px;
        font-size: 65px;
        background-color: transparent;
        color: inherit;
        display: block;
        font-family: inherit;
        line-height: 1;
        min-width: 30px;
        overflow: hidden;
        resize: none;
        text-transform: uppercase;
        white-space: pre;
    }
<textarea spellcheck="false" class="draggable"></textarea>

I can enlarge the height but in my case I can't. Is there any way to avoid this scroll?

Upvotes: 2

Views: 7383

Answers (3)

Tushar Shukla
Tushar Shukla

Reputation: 6605

Well the question seems quite old but hope my code would help someone in need!!
There is no simple way to achieve this but yes it can be done, check DEMO.

What i've done is:

1. Fixing height of textarea
height: 10rem;
2. Say there are four rows, then line-height= height/4 (calculate it yourself as required)
3.Disable scrollbars
overflow: hidden or overflow:auto (Both are fine!)
4. Now check if the number of '\n' exceeds the number of required rows:

Here is the complete JS structure:

$(function() {
  BindHandlers();
  count_of_new_line = 0; /*This variable is global*/
});

function CaretPosition(ctrl) { /*This is to get the current position of cursor*/
  var CaretPos = 0;
  if (document.selection) {
    ctrl.focus();
    var Sel = document.selection.createRange();
    Sel.moveStart('character', -ctrl.value.length);
    CaretPos = Sel.text.length;
  } else if (ctrl.selectionStart || ctrl.selectionStart == '0')
    CaretPos = ctrl.selectionStart;
  return (CaretPos);
}

function BindHandlers() {
  $('#text_area').on({
    keyup: function(f) {
      var search_value = $(this).val();
      var cursorPosition = CaretPosition(document.getElementById('text_area'));
      var search_value_before_current_cursor = search_value.substr(0, cursorPosition);
      var latest_new_line = search_value_before_current_cursor.lastIndexOf("\n");
      var keycode=f.keyCode;
      if (keycode == 13) {
        count_of_new_line = count_of_new_line + 1;
        if (count_of_new_line > 3) {
          var max_val = search_value.substr(0, latest_new_line);
          $('#text_area').val(max_val);
          search_value = max_val;
          f.preventDefault();
        }
      }
    }
  })
}



Hope this would help!!

Upvotes: 0

mim
mim

Reputation: 41

this is because font size is bigger than the height of your textarea when try to apply smaller font size, font-size: 30px; will works fine. except this your code is fine @Naor

Upvotes: 1

Klaas Leussink
Klaas Leussink

Reputation: 2727

You can wrap the textarea in a div wrapper, like so:

<div class="textarea_wrapper"><textarea spellcheck="false" class="draggable"></textarea></div>

Then, set the CSS of that wrapper to the CSS you had for the textarea, and for the textarea add a line-height equivalent to the height of the wrapper div:

.textarea_wrapper {
    border: 1px solid black;
    width: 160px;
    height: 60px;
    font-size: 65px;
    background-color: transparent;
    color: inherit;
    display: block;
    line-height: 1;
    min-width: 30px;
    overflow: hidden;
    resize: none;
    text-transform: uppercase;
    white-space: nowrap;
}

textarea {
    font-family: inherit;
    font-size: 65px;
    line-height:60px;
    width: 160px;
}

See this Fiddle for a demo

Upvotes: 0

Related Questions