Question

我有textarea溢出：隐藏;风格。
但是，每当我按下向上/向下箭头时，textarea会滚动一点有没有办法禁用这个滚动？

如果按向上和向下键移动文本。

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>

我可以放大身高但在我的情况下我不能。有没有办法避免这种滚动？

Answer 1

这是因为当尝试应用较小的字体大小时，字体大小比 textarea 的高度大，font-size: 30px;将正常工作。除此之外你的代码很好@Naor

Answer 2

您可以将textarea包装在div包装器中，如下所示：

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

然后，将该包装器的CSS设置为textarea的CSS，并为textarea添加一个等于包装器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

Answer 3

这个问题看起来很旧但希望我的代码可以帮助有需要的人!! 没有简单的方法可以实现这一点但是可以做到，请检查DEMO。

我所做的是：

1. textarea的固定高度
height: 10rem;
2.假设有四行，然后是line-height = height / 4（根据需要自己计算）
3.Disable滚动条
overflow: hidden或overflow:auto（两者都很好！）
4.现在检查＆＃39; \ n＆＃39;的数量。超过所需行数：

这是完整的JS结构：

$(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();
        }
      }
    }
  })
}

希望这会有所帮助!!

textarea禁用向上/向下箭头滚动

3 个答案: