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

问题描述

类似于下面的 JSFiddle(我加了书签，不知道最初的问题是从哪里出现的):

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

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 10 }'/>输入 {宽度:200px；最小宽度:200px；最大宽度:300px；过渡:宽度0.25s；}

有没有办法将文本字段的宽度固定为例如 200 像素，并且如果用户添加更多文本字段的高度比 200px 能包含的文本?如果用户需要更多的输入空间，我希望添加更多行......所以我需要高度，而不是宽度，动态调整大小.>

谢谢！

解决方案

正如其他人解释的，input 字段不能有多行文本，你应该使用 textarea 来模仿一个输入字段，和 jQuery 使其自动垂直调整大小(固定宽度).

JS:

//这个span用来衡量textarea的大小//它应该与textarea具有相同的字体和文本并且应该被隐藏var span = $('').css('display','inline-block').css('word-break','break-all').appendTo('body').css('visibility','hidden');函数initSpan(文本区域){span.text(textarea.text()).width(textarea.width()).css('字体',textarea.css('字体'));}$('textarea').on({输入:函数(){var text = $(this).val();跨度文本(文本)；$(this).height(text ?span.height() : '1.1em');},重点:功能(){initSpan($(this));},按键:功能(e){//取消回车键，否则会新建一行//这可确保用户键入 Enter 时的正确行为//进入输入框if(e.which == 13) e.preventDefault();}});

CSS:

textarea {宽度:200px；调整大小:无；溢出:隐藏；字体大小:18px；高度:1.1em；填充:2px；}

演示.

更新的演示:

这个新更新的demo修复了一些bug，还支持回车键，max-height限制，宽度不需要一开始固定设置(而是我们可以设置它的min-width).它的功能要全面得多.

更新演示

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.

Updated Demo:

This new updated demo has some bugs fixed and it also supports Enter key, max-height limit, the width does not need to be set fixedly at first (instead we can set its min-width). It's much more full-featured.

Updated Demo

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