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

Question

我有溢出的文本区域：隐藏；风格。
但是，每当我按下向上/向下箭头时，textarea 都会滚动一点。
有什么办法可以禁用这个滚动？

这是jsfiddle：http: //jsfiddle.net/6bV3W/

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

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

这是因为当尝试应用较小的字体大小时，字体大小大于文本区域font-size: 30px;的高度，可以正常工作。除了这个你的代码很好@Naor

Answer 2

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

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

然后，将该包装器的 CSS 设置为您为 textarea 设置的 CSS，并为 textarea 添加一个与包装器 div 高度相等的 line-height：

.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;
}

请参阅此 Fiddle 以获取演示

Answer 3

好吧，这个问题似乎很老了，但希望我的代码能帮助有需要的人！
没有简单的方法可以实现这一点，但是可以做到，检查DEMO。

我所做的是：

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

这是完整的 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();
        }
      }
    }
  })
}

希望这会有所帮助！