Question

有没有办法让textarea在用户输入时扩展其宽度？基本上我使用textarea的边框因此我需要textarea的WIDTH只是最长线的长度。所以它看起来很整洁。

注意：我允许用户更改textarea的字体大小。

这就是我所拥有但却没有做到的。

$(document).on("click blur keyup", ".fT", function() {
      var newWidth = ($('#tfd').val().length)*10;
      $('#tfd').width(newWidth);
});

我并不关心textarea的高度。我只需要将textarea放到里面的文本中。

Answer 1

如果我理解正确你想要达到类似的东西:( jsfiddle删除，请参阅下面的小提琴）

它使用隐藏的div来根据文本内容计算textarea的宽度。 textarea有填充：0所以宽度与你想要的内容严格相关。 div风格＆＃34; min-width＆＃34;和＆＃34; max-width＆＃34;定义textarea可以折叠/展开的最小和最大宽度。

编辑：您指出的问题是由于div中的换行而发生的。为了避免它你最终可以使用CSS white-space：pre-line; propoerty。我更新（附加）示例小提琴。

＆＃13;

$("#t1").on("keyup", function() {

  $("#d1").text($(this).val());
  $(this).css("width", $("#d1").css("width"));
  $(this).css("height", $("#d1").css("height"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="t1" style='min-width:100px;min-height: 100px; padding:0; font-size:14px'>

</textarea>

<div id="d1" style='max-width:200px;min-height:20px;white-space: pre-line; float:right;font-size:15px; display:none'>

</div>

＆＃13;

Answer 2

看起来最大的问题与您的选择器有关。我已经提供了一个JSBin来说明你想要实现的目标，但是如果你能用你的确切方案创建一个，我可以进一步提供帮助。

您的逻辑是正确的，但$（文档）.on（“click blur keyup”，“。fT”）未注册到相应的选择器。尝试将其更改为：

$(".fT").keypress(function() { // function handler here //; }

这是用于说明这一点的当前JSBin示例：

http://jsbin.com/jogixotoca/5/edit?html,js,output

Answer 3

以下是输入时触发的示例。

http://jsfiddle.net/kvc0L4ut/19/

<script>
    function expand(el, e){
        var text = el.value.split("\n");
        var minColSize = 19;
        for(var i=0; i < text.length; i++){
            minColSize = (text[i].length > minColSize) ? text[i].length : minColSize;
        }
        el.cols = minColSize + ((e.which == 8 && minColSize != 19) ? -1 : 1);
    }
</script>

<textarea onkeydown="expand(this, event)"></textarea>

Answer 4

当用户类型太容易时，

扩展文本区域..使用以下html

<textarea id="inbox" onclick="expand()" style="width: 300px; height: 250px;"></textarea>

以下js脚本：

function expand(){
var box = document.getElementById('inbox');
box.style = "width: 500px; height: 500px;"
}

如果您想在有人打字时使用文本框，那么请使用oninput =）

Textarea在用户输入时扩展其宽度

4 个答案: