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禁用向上/向下箭头滚动

回答

相关问题