2

オーバーフロー: 非表示のテキストエリアがあります。スタイル。
しかし、上下の矢印を押すたびに、テキストエリアが少しスクロールします。
このスクロールを無効にする方法はありますか?

ここに 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>

高さを大きくすることはできますが、私の場合はできません。このスクロールを回避する方法はありますか?

4

3 に答える 3

1

これは、小さいフォント サイズを適用しようとすると、フォント サイズがテキスト領域font-size: 30px;の高さよりも大きくなるためです。これを除いて、あなたのコードは問題ありません@Naor

于 2015-12-17T07:20:10.273 に答える
0

質問はかなり古いようですが、私のコードが困っている人を助けることを願っています!!
これを実現する簡単な方法はありませんが、可能です。 DEMOを確認してください。

私がやったことは次のとおり

です。 1.テキストエリアの高さを修正します 2.4
height: 10rem;
つの行があるとします。次に、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();
        }
      }
    }
  })
}



これが役立つことを願っています!!

于 2015-12-17T06:42:38.897 に答える
0

次のように、テキストエリアを 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;
}

デモについては、このフィドルを参照してください

于 2013-01-10T16:10:58.913 に答える