澳门最出名赌场-拉斯维加斯金沙集团

网站制作四大环节中中除了策划、设计、程序外，就是前端了。随着Html5的发展和普及，Html5非常受欢迎，其功能强大，浏览器支撑良好，做为一个前端工程师，大展拳脚的机会来了。尽管如果，前端工程师的水平层次又差别开来了。

前端制作静态页面的时候经常会使用textarea标签进行多行文本区域的制作，但是textarea标签的输入有很多限制，比如不能实现高度自适应，会出现难看的滚动条，默认状态下可拉伸等问题。不利于页面概况美观。

那么要怎么调控呢？

HTML5中添加了一个新属性contenteditable，该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能；

用法如下：

//contenteditable="true"　　当属性值为true的时候，可编辑标签内可以写入标签，对于复制的具有样式的内容，其样式会保留；

我是可编辑的富文本框

//contenteditable="plaintext-only"　　当属性值为plaintext-only时，该可编辑标签内只能写入纯文本的数据，对于复制的具有样式的内容，会转换为纯文本，而将样式标签等内容过滤掉；

如果不使用该属性，可以使用js控制textarea的高度；原理是当textarea出现滚动条时，增加其高度，使滚动条消失。

怎样判断是否出现滚动条，其方法是但元素的scrollHeight大于offsetHeight的时候，即出现了滚动条；

实现方法如下：

//html //css #text{ 　　font-size: 20px; 　　overflow: hidden;　　//必须 } //js $('#text').on('input',function(){ 　　if(text.scrollHeight>text.offsetHeight){ 　　　　THeight += 20;　　//font-size的大小是20，因此每次给textarea的高度增加20px 　　　　$('#text').css('height',THeight);} })

而关于textarea 标签默认状态下可拖动这个问题，HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：

1.彻底禁用拖动（推荐）

resize:none;

2.只是固定大小，右下角的拖动图标仍在

width:200px;

height:100px;

max-width:200px;

max-height:100px;

一般来说设计师设计的设计稿上需要用到 textarea 标签的地方都有明确的宽高限制，那么在写样式的时候加一个resize:none; 属性可以彻底禁用拖动，而参照上面的JS调控高度自适应的方法则可以使并不美观的滚动条消失，从而达到实现功能的同时是页面变得美观。

编辑：小知鸟科技乐文庆

网站前端制作中关于textarea高度自适应调控及防止拖动 免费h5制作网站好 重庆企业seo