HTML TextArea自动调整大小 [英] HTML TextArea resize automatically

查看：1762 发布时间：2017/2/9 14:49:10 javascript html css

本文介绍了HTML TextArea自动调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要一个文本区域，它总是和文本一样大。所以页面可以滚动，并且在文本区域不能滚动。

这是我到现在为止：

 <！DOCTYPE html> 
< html> 
< head> 
< style type =text / css> 
 html，body {height：100％;} 
 textarea {
 border：none; 
 width：100％; 
 height：100％; 
 -webkit-box-sizing：border-box; 
 line-height：44px; 
 font-family：Helvetica; 
 font-size：17pt; 
 -webkit-tap-highlight-color：rgba（0,0,0,0）; 
 background-image：url（'linedBack@2x.png'）; 
 outline：none; 
 resize：none; 
} 
 textarea.vert {resize：vertical; } 
< / style>< / head>< body> 
< textarea id =InputTextAreaplaceholder =placeholder>< / textarea> 
< / body>< / html>

解决方案

根据内容行号调整TeaxArea。以下是 DEMO

  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  if（a [i] .getAttribute（'data-resizable'）=='true'）
 resizeTextarea（a [i] .id）; 
} 
} 
 
 addEventListener（'DOMContentLoaded'，init）; 
   
 
 
  HTML 
 < textarea id =InputTextAreaplaceholder =placeholderonkeyup =resizeTextarea（'InputTextArea'）>< / textarea> 
  
 
I would like to have a text area which is always as big as the text in it. So the page can be scrolled and in the text area cannot be scrolled.

Here's what I did until now:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {height: 100%;}
textarea {
border: none;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
line-height: 44px;
font-family:Helvetica;
font-size: 17pt;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-image:url('linedBack@2x.png');
outline: none;
resize: none;
}
textarea.vert { resize:vertical; }
</style></head><body>
<textarea id="InputTextArea" placeholder="placeholder"></textarea>
</body></html>

 解决方案 
Resizing TeaxArea based on the content line number. Here's a DEMO

JS
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);
HTML
<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>


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

查看全文

HTML TextArea自动调整大小 [英] HTML TextArea resize automatically

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

HTML TextArea自动调整大小 [英] HTML TextArea resize automatically

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭