在加载时调整TextArea的大小

问题描述

我在尝试调整文本区域的大小时遇到​​了问题，我可以在用户输入内容时执行此操作，但是当它们提交后，会将其放入数据库并放入下方的文本区域中，并显示为消息留言板，但如果邮件超过文本区域的大小，它不会显示我想知道是否有人有这个问题，并克服它。

I'm having issues trying to resize a text area, I can do it as the user is typing but when they have submit it this gets put into a database and put into a text area below and display as a message on a message board but if the message exceeds the size of the Text Area it's not displayed I was wondering if anyone out there has had this issue and overcome it.

这是解决方案我打算在输入时调整大小，

Here is the solution I came up with for the resizing whilst typing,

function resizeTextarea (id) {
  var a = document.getElementById(id);
  a.style.height = 'auto';
  a.style.height = a.scrollHeight+'px';
}

function init()
{
  var a = document.getElementsByTagName('textarea');
  for(var i=0,inb=a.length;i<inb;i++)
  {
     if(a[i].getAttribute('data-resizable')=='true')
     {
      resizeTextarea(a[i].id);
     }
  }
}

addEventListener('DOMContentLoaded', init);

这是在我使用它的其他页面的textarea上的keyup上调用的，但我试过做这样的事情，当它加载时调整大小，但它不起作用，但当按下按钮或单击按钮时它可以工作。

This is called on keyup on the textarea in my other page where ive used it but I have tried to do something like this to resize when it loads but it doesn't work but it does work when a key is pressed or a button is clicked.

onload="resizeTextarea('commentstext');"

我知道我总是可以将它滚动或放入div中，但divs不会格式化文本就像一个textarea，如果我在文本中做一个换行符并将它提交给一个div ti不会在那里

I know i could always have it scrollable or put it into a div but divs don't format the text like a textarea if i do a line break in the text and submit it to a div ti wont be there

推荐答案

修改以前的解决方案：

See my modification of prior solution: http://jsfiddle.net/CbqFv/570/

<textarea cols="42" rows="1">
1 ...by default, you can write more rows</textarea><br />
<br />
<textarea cols="42" rows="5">
1
2
3
4
5 ...by default, you can write more rows</textarea><br />
<br />
<textarea cols="42" rows="10">
1
2
3
4
5
6
7
8
9
10 ...by default, you can write more rows</textarea>

CSS

CSS

textarea {
  border: 1px solid gray;
  border-radius: 3px;
  line-height: 1.3em;
  overflow: hidden;
  padding: 0.3em 0.3em 0 0.3em;
  outline: none;
  background-color: white;
  resize: none;
}

JavaScript

JavaScript

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 () {
  function resize (element) {
    element.style.height = 'auto';
    element.style.height = element.scrollHeight+'px';
  }
  /* 0-timeout to get the already changed text */
  function delayedResize (element) {
    window.setTimeout(function() { resize(element) }, 0);
  }
  var textareas = document.getElementsByTagName("textarea");
  for (i = 0; i < textareas.length; i++) {
    var textarea = textareas[i];
    observe(textarea, 'change', function() { resize(this) });
    observe(textarea, 'cut', function() { delayedResize(this) });
    observe(textarea, 'paste', function() { delayedResize(this) });
    observe(textarea, 'drop',function() { delayedResize(this) });
    observe(textarea, 'keydown', function() { delayedResize(this) });
    textarea.focus();
    textarea.select();
    resize(textarea);
  }
}

init();

这篇关于在加载时调整TextArea的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！