动态扩展输入类型“文本”的高度基于输入字段的字符数 [英] Dynamically expand height of input type "text" based on number of characters typed into field

问题描述

类似于下面的JSFiddle（我加入书签，不知道原始问题出现在哪里）：

http://jsfiddle.net/mJMpw/6/

 < input type =textvalue =placeholder =Autosizedata-autosize-input ='{space：10}'/> 
 
 input {
 width：200px; 
 min-width：200px; 
 max-width：300px; 
 transition：width 0.25s; 
} 
  

有一种方法可以修复文本字段的宽度，例如只有200像素，并且如果用户添加的文字比200像素包含的文本多，则文本字段的 height 会增加？我想要添加更多的行，如果用户需要更多的空间来输入...所以我需要高度 ，而不是宽度，动态调整大小。 p>

谢谢！

解决方案

输入字段不能有多行文本，您应该使用 textarea 来模拟输入字段，并使用jQuery使其自动垂直调整width）。

JS ：

  //这个span用来测量textarea的大小
 //它应该和textarea有相同的字体和文本，应该隐藏
 var span = $（'< span> ）.css（'display'，'inline-block'）
 .css（'word-break'，'break-all'）
 .appendTo（'body' ，'隐'）; 
 function initSpan（textarea）{
 span.text（textarea.text（））
 .width（textarea.width（））
 .css（'font'，textarea。 css（'font'））; 
} 
 $（'textarea'）。on（{
 input：function（）{
 var text = $（this）.val（）; 
 span .text（text）; 
 $（this）.height（text？span.height（）：'1.1em'）; 
}，
 focus：function（）{
 initSpan（$（this））; 
}，
 keypress：function（e）{
 //取消Enter键击，否则将创建一行
 //当用户输入
 //到输入字段
 if（e.which == 13）e.preventDefault（）; 
} 
}时，这确保正确的行为。 
  

CSS ：

  textarea {
 width：200px; 
 resize：none; 
 overflow：hidden; 
 font-size：18px; 
 height：1.1em; 
 padding：2px; 
} 
  

演示。

Similar to the below JSFiddle (which I bookmarked and do not know from where the original question emerged):

http://jsfiddle.net/mJMpw/6/

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 10 }' />

input {
    width: 200px;
    min-width: 200px;
    max-width: 300px;
    transition: width 0.25s;    
}

Is there a way to fix the width of a text field to, for example 200px only, and have the height of the text field grow if a user adds more text than the 200px is able to contain? I would like more rows to be added, if a user needs more room to type... so I need the height, not the width, to resize dynamically.

Thanks!

解决方案

As others explained, input field can't have multiline text, you should use textarea to mimic an input field, and jQuery to make it auto resize vertically (with fixed width).

JS:

//This span is used to measure the size of the textarea
//it should have the same font and text with the textarea and should be hidden
var span = $('<span>').css('display','inline-block')
                      .css('word-break','break-all')
                      .appendTo('body').css('visibility','hidden');
function initSpan(textarea){
  span.text(textarea.text())
      .width(textarea.width())
      .css('font',textarea.css('font'));
}
$('textarea').on({
    input: function(){
       var text = $(this).val();      
       span.text(text);      
       $(this).height(text ? span.height() : '1.1em');
    },
    focus: function(){           
       initSpan($(this));
    },
    keypress: function(e){
       //cancel the Enter keystroke, otherwise a new line will be created
       //This ensures the correct behavior when user types Enter 
       //into an input field
       if(e.which == 13) e.preventDefault();
    }
});

CSS:

textarea {
  width:200px;
  resize:none;
  overflow:hidden;
  font-size:18px;
  height:1.1em;
  padding:2px;
}

Demo.

这篇关于动态扩展输入类型“文本”的高度基于输入字段的字符数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！