我是靠谱客的博主 发嗲煎蛋,最近开发中收集的这篇文章主要介绍HTML5的输入框高度,使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应) - h...,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

一、使用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);}})

最后

以上就是发嗲煎蛋为你收集整理的HTML5的输入框高度,使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应) - h...的全部内容,希望文章能够帮你解决HTML5的输入框高度,使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应) - h...所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(36)

评论列表共有 0 条评论

立即
投稿
返回
顶部