textarea禁用向上/向下箭頭滾動

我有textarea溢出：隱藏;樣式。
但是，無論何時按下上/下箭頭，textarea都會滾動一下。
有什麼辦法可以禁用這個滾動條？如果按上下鍵文本移動http://jsfiddle.net/6bV3W/textarea禁用向上/向下箭頭滾動

：

這裏的jsfiddle。

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>

我可以放大高度，但在我的情況我不能。有沒有辦法避免這個滾動？

來源

2013-01-10 Naor

使它'顯示：塊;'或給它'寬度'和'高度' 這就是我沒有代碼問題的所有假設 – kidwon

你能告訴我們你的代碼嗎？ –

@ Siamak.A.M：我添加了代碼。 – Naor

你可以用textarea的在一個div包裝，像這樣：

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

然後，設置包裝到你不得不爲的textarea的CSS的CSS，併爲文本區域添加行高相當於包裝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

來源

2013-01-10 16:10:58

如果我想要兩行文字怎麼辦？我該如何改變這一點？ – Naor

只需將包裝的高度加倍：http://jsfiddle.net/c_kick/vCnrh/（我也在textarea上設置了一個寬度，忘記了在另一個小提琴中） –

好這個問題似乎很舊，但希望我的代碼將幫助有需要！
有沒有簡單的方法來實現這一點，但是可以做到，請檢查DEMO。

我做了什麼是：文本區域的

1.定影高度
height: 10rem;
2.說有四排，然後行高=高度/ 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-17 06:42:38

這是因爲字體大小大於textarea的高度，當嘗試應用較小的字體大小時，font-size: 30px;將正常工作。除了這你的代碼是好的@Naor

來源

2015-12-17 07:20:10 mim

textarea禁用向上/向下箭頭滾動

回答

相關問題