HTML5技术

使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应) - h

字号+ 作者:H5之家 来源:H5之家 2017-01-12 12:10 我要评论( )

一、使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题。 HTML5中添加了一个新属性contenteditable,该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能; 用法如下: //contenteditable="true"

一、使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题。

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

  用法如下:

//contenteditable="true"  当属性值为true的时候,可编辑标签内可以写入标签,对于复制的具有样式的内容,其样式会保留;
<div contenteditable="true">我是可编辑的富文本框</div>

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

 

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

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

  实现方法如下:

//html
<textarea></textarea>

//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);
}
})

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性能优化 - 乔克灬叔叔

    使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性

    2017-01-08 09:00

  • Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    2016-12-17 10:01

  • 模拟Bootstrap响应式网格系统 - Avenstar

    模拟Bootstrap响应式网格系统 - Avenstar

    2016-12-16 18:04

  • 使用Web Storage模拟数据库 - MRGan

    使用Web Storage模拟数据库 - MRGan

    2016-12-04 11:00

网友点评