显示所有textarea行而不滚动[重复]

Posted 2023-03-06

【中文标题】显示所有textarea行而不滚动[重复]

【英文标题】：display all textarea rows without scrolling [duplicate]

【发布时间】：2015-07-15 01:08:13

【问题描述】：

如何显示所有 textarea 行而不是垂直滚动。我尝试过使用 min-height 和 max-height and height: auto 使用 css，但不工作。

.form-control
    width:400px;
    min-height: 100px;
    max-height: 900px;
    height: auto;

我真的不知道是否可以用 css 做到这一点。

也许使用原生 javascript 是可能的，所以我正在尝试这样的事情

function expandtext(expand) 
    while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) 
        console.log("display all rows!")>
    

我发现了一些不错的东西 here 但它只会增加和减少行，所以我如何在不使用滚动的情况下显示所有 textarea 行。不需要具有固定高度的解决方案，需要一些动态的解决方案或其他仅适用于 chrome 浏览器或仅适用于 Object.observe() 之类的 firefox 的解决方案。

演示

function expandtext(expand) 
  while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) 
    console.log("display all rows!") >
  

body 
  padding: 20px;

.form-control 
  width: 400px;
  min-height: 100px;
  max-height: 900px;
  height: auto;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" form-group">
  <label>remove texarea scroll and display all rows</label>
  <textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
    tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>
</div>
<div class=" form-group">
  <label>remove texarea scroll and display all rows</label>
  <textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.</textarea>
</div>

外部JSFiddle。

【参考方案1】：

简单的jQuery解决方案是：

$(function() 
    $('textarea').each(function() 
        $(this).height($(this).prop('scrollHeight'));
    );
);

查看Fiddle.

由于您需要一个纯 JavaScript 解决方案，请使用由 User panzi 创建的以下脚本。可以查看原答案here。

var observe;
if (window.attachEvent) 
    observe = function (element, event, handler) 
        element.attachEvent('on'+event, handler);
    ;

else 
    observe = function (element, event, handler) 
        element.addEventListener(event, handler, false);
    ;

function init () 
    var text = document.getElementById('textarea');
    function resize () 
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    
    /* 0-timeout to get the already changed text */
    function delayedResize () 
        window.setTimeout(resize, 0);
    
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();

查看Fiddle Here.

【讨论】：

你需要在每次输入时调用它。

@ketan 我想要一个使用原生 javascript 的解决方案，因为我没有使用 jQuery 库：|

@mcmwhfy：但是你的演示使用的是 jQuery...

@Polywhirl 先生，我的示例在没有 jQuery 的情况下运行

你记下了author吗？

【参考方案2】：

无需 Javascript。

您可以使用以下 html 和 CSS 显示不可滚动（即自动调整大小）的可编辑文本区域：

.textarea 
  width:250px;
  min-height:50px;
  height:auto;
  border:2px solid rgba(63,63,63,1);

<div class="textarea" contenteditable="true">

【讨论】：

我知道这个 html5 属性，非常棒，但不幸的是，它不适用于所有浏览器:(

【参考方案3】：

Mozilla 开发者网络在其HTMLTextAreaElement 页面上有一个Autogrowing textarea example。如果您想远离可能在旧浏览器上中断的 CSS3 解决方案，您绝对应该检查一下。

这是示例中的代码。

以下示例展示了如何让文本区域在键入时真正自动增长。

function autoGrow(oField) 
  if (oField.scrollHeight > oField.clientHeight) 
    oField.style.height = oField.scrollHeight + "px";
  

textarea.noscrollbars 
  overflow: hidden;
  width: 300px;
  height: 100px;

<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>

自动调整

此示例将处理删除行的情况。

function autoAdjustTextArea(o) 
  o.style.height = '1px'; // Prevent height from growing when deleting lines.
  o.style.height = o.scrollHeight + 'px';



// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max)return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);
var randChars=function(chrs,len)return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';
// ============================== /IGNORE =====================================


// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);

textarea.noscrollbars 
  overflow: hidden;
  width: 400px; /** This is via your example. */

<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>

【讨论】：

这很好，但不能回答我的问题，显示所有 textarea 行，他只运行 onkeyup :(

@mcmwhfy：“他”是谁？

:|该函数仅在 onkeyup 运行，当我加载页面时什么都不做，也许如果我在其他事件（如 onchange）上调用此函数

嗯，这是为了实时增长和收缩......所以你希望它在页面加载时发生？

onload 我想查看所有行和 onchange 我想拥有在您的示例中已经有效的增加和减少解决方案。 (o.style.height = o.scrollHeight) 当我使用 ctrl + v 在该 javascript 中复制某些内容时，也需要 onchange 来增加高度。 User panzi 的解决方案很棒，但 Object.observe() 在其他浏览器中是错误的： （

【参考方案4】：

使用 Jquery 和一些逻辑我已经尝试做你需要的。 这是jsfiddle； https://jsfiddle.net/45zsdzds/

HTML：

<textarea class="myClass" id="FurnishingDetails" name="FurnishingDetails" id="FurnishingDetails"></textarea>

Javascript：

$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function()  return $('#FurnishingDetails').text().split(/\r*\n/); 
String.prototype.lineCount = function()  return $('#FurnishingDetails').text().lines().length; 
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');

CSS：

textarea[name='FurnishingDetails']
 height:2em;  

使用How to get the number of lines in a textarea? 添加字符串原型以获取行数。