Question

我试图像输入一样进行自动调整大小，例如当用户输入时，输入会自动调整以适应输入中的值，但似乎我无法做到正确或工作。有什么想法，请帮忙吗？

＆＃13;

device

＆＃13;

$(document).ready(function(){
  $('input').on('input',function(){
    $(this).css('width',$(this).width()+$(this).val().length );
  });
});

＆＃13;

input{border:1px solid red;width:30px;}

＆＃13;

Answer 1

我建议在这种情况下使用 contenteditable-span ，我希望它有所帮助。

#test{border:1px solid red;width:30px;}

<span id="test" contenteditable>I'm trying to make an auto resize like input</span>

Answer 2

如果您的目标是使其尽可能宽，可能使用30px缓冲区，那么问题是您每次都将添加到宽度而不是从头开始重新计算。如果您知道角色的宽度，也会有所帮助，因此最好特别设置字体大小，甚至使用另一个隐藏元素来测量渲染文本的宽度;在这里我使用span：

$(document).ready(function(){
  $('input').on('input',function(){
    var $this = $(this);
    // Get the value
    var val = $this.val();
    
    // Put it in the hidden span using the same font information
    var $hidden = $(".hidden");
    $hidden.text(val);
    
    // Set the input to the span's width plus a buffer
    $this.css('width', $hidden.width() + 30);
  });
});

input {
  border:1px solid red;
  font-size: 14px;
  width:30px;
}
.hidden {
  font-size: 14px;
  display: none;
}

<input type="text">
<span class="hidden"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

调整输入的宽度，该宽度对应于输入的值长度

2 个答案: