分享更有价值
被信任是一种快乐

怎么使用div模拟实现textarea

文章页正文上

这篇文章主要介绍了怎么使用div模拟实现textarea的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用div模拟实现textarea文章都会有所收获,下面我们一起来看看吧。
我们都知道textarea是form表单中一个很常见的元素,用于多行文本输入,可以设置行数和列数。
但是默认的textarea样式在页面上看起来是很丑的,很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说,在你看页面源码后就会发现这个输入框其实是一个div元素,并不是一个textarea元素,现在我们就来看看这是如何实现的吧?
首先来看看实现的效果是什么样的。
实现效果
关键属性:contenteditable
正如这个属性的字面意思,可以理解为可编辑的,如果在页面标签上设置contenteditable=true,该标签就免费云主机、域名可以进行编辑了。
可以配合user-modify属性,该属性表示的是控制用户能否对页面元素进行编辑,通过设置不同的值可以选择富文本或者纯文本内容,但是由于该属性是非标准属性,很少有人知道。
首先我们来看看页面的HTML部分代码,就是一个很简单的div标签,然后设置contenteditable属性为true。
HTML部分代码
接下来我们就看看整个CSS代码的完整实现吧。
CSS样式
通过min-height和max-height属性可以控制div的高度,在内容超出max-height后会出现滚动条。如果想要固定div的高度,则只需要设置height属性就可以,而不用设置min-height和max-height属性。关于“怎么使用div模拟实现textarea”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么使用div模拟实现textarea”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: 如何用nodejs实现网页采集功能

这篇文章主要讲解了“如何用nodejs实现网页采集功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用nodejs实现网页采集功能”吧! 一、什么是Node.jsNode.js是一个跨平台的开源运行时环境,…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册