网站前端制作中关于textarea高度自适应调控及防止拖动

2023-02-21    分类: 网站建设

网站制作四大环节中中除了策划、设计、程序外,就是前端了。随着Html5的发展和普及,Html5非常受欢迎,其功能强大,浏览器支持良好,做为一个前端工程师,大展拳脚的机会来了。尽管如果,前端工程师的水平层次又差别开来了。
网站前端textarea
前端制作静态页面的时候经常会使用textarea标签进行多行文本区域的制作,但是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 id="text"></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); } })
而关于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高度自适应调控及防止拖动
网站链接:https://www.cdcxhl.com/news13/238813.html

成都网站建设公司_创新互联,为您提供用户体验搜索引擎优化网站导航网站收录微信小程序商城网站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

营销型网站建设