css中解决textarea高度随内容自适应的问题

最新推荐文章于 2023-11-22 09:32:36 发布
最新推荐文章于 2023-11-22 09:32:36 发布
阅读量4.6k 收藏 1
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjnf012/article/details/51324339
版权

目前的输入框实现有两种方法：
- input
input输入框只能实现一行，里面的内容不能分行显示
- textarea
textarea可以实现多行输入，但是高度却无法自适应，并且会遇到textarea始终会与下面有一段间距，解决方法：加（vertical-align: middle;）即可

那么言归正传，如何实现多行输入并且高度随内容自适应呢？

textarea确实无法实现（我目前所知道的），但是我们可以换一种方式去实现这种效果。HTML5新增属性contenteditable就解决了这个问题
这里写图片描述
这样这个div就是可编辑的，可以根据自己需要的样式来定义

爱编程的兔子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Textarea根据内容自适应高度
12-12
直接看代码吧，很简单，也很实用。 代码如下:<!DOCTYPE html><html><head><title>autoresizing textarea</title><style type=”text/css”>textarea {    border: 0 none white;    overflow: hidden;    padding: 0;    outline: none;    background-color: #D0D0D0;    resize: none;}</style>[removed]var observe;if (
textarea高度随内容自适应
简析的博客
05-15 579
textarea高度随内容自适应 html中加入oninput="this.style.height=this.scrollHeight + 'px'" <textarea name="maybeDamage" id="" oninput="this.style.height=this.scrollHeight + 'px'"></textarea> 拉取数据填充的时候也希望是按给的内容来自适应高度 在填充数据后加入如下代码 $('textarea').each(fu.
textarea根据内容自适应高度
yin_you_yu的博客
12-19 481
makeExpandingArea(el) { var setStyle = function(el) { el.style.height = "auto"; el.style.height = el.scrollHeight + "px"; // console.log(el.scrollHeight); }; ...
html5 textarea 文本框根据输入内容自适应高度
weixin_30656145的博客
09-24 734
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本框根据输入内容自...
css 实现textarea标签高度自适应
农码精神
06-30 1306
.grow-wrap { display: grid; word-break: break-all; } .grow-wrap::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; } .grow-wrap>textarea { resize: none; overflow
textarea 自适应高度
yang_383536473的博客
11-11 476
$(document).on('input propertychange', 'textarea', function () { this.rows =1 // 先将 rows 设为1, ‘可以不设置试一试删除文本的时候会不会改变行高’ var text_height = $(this).height() // 获取textarea标签中文字所占高度 var padding_top_and_bottom = $(this).innerHeight() - text_height // 计算pa
textarea实现内容自适应高度（公用方法）
weixin_43465396的博客
06-30 257
以vue为例 src/utils/utils.js // 根据内容自适应高度 export function setTareaAutoHeight(id) { document.getElementById(id).style.height = document.getElementById(id).scrollHeight + 'px' } 需使用文件 import { setTareaAutoHeight } from '@/utils/util.js' export default
Vue下textarea文本框根据内容自适应改变高度
10-20
一种可能的解决方案是使用CSS的`resize`属性，将其设置为`none`，以禁用用户的缩放功能，这在某些版本的IE中可以帮助解决问题。 ```css :auto-height-textarea textarea { resize: none; } ``` 现在，我们的Vue...
css textarea 高度自适应,无滚动条
09-27
以下是如何使用CSS来实现`textarea`高度自适应的方法。 首先，我们可以设置`textarea`的基本样式，例如宽度和溢出行为。例如： ```css .t_area { width: 300px; overflow-y: visible; } ``` 这段代码中，`width...
使用 CSS 实现文本区域的自动增加高度
最新发布
weixin_55967922的博客
11-22 380
平时开发项目的时候经常会用到textarea,但是会遇到文本超过 textarea 的初始高度，文本就会溢出，用户必须滚动才能查看文本的其余部分。原文：https://www.amitmerchant.com/textarea-auto-increase-height/属性，它将允许根据用户输入的文本量自动增加文本域的高度。即将推出一种实验性的 CSS 规则，即。注意：需要 Chrome 120 版本。
css设置textarea宽高,textarea自动调整高宽
weixin_42709044的博客
08-04 3441
css:#textarea {display: block;margin:0 auto;overflow: hidden;width: 550px;font-size: 14px;height: 18px;line-height: 24px;padding:2px;}textarea {outline: 0 none;border-color: rgba(82, 168, 236, 0.8);bo...
css textarea行数_文本框textarea根据输入内容行数多少自适应调节高度的
weixin_39625975的博客
12-20 453
文本框根据输入内容自适应高度 阿里西西特效网 js.alixixi.com#textarea { font: 1.4em/1.8em Arial; overflow: hidden; width: 550px; height: 6em; padding:10px; }/*** 文本框根据输入内容自适应高度* @author tang bin* @version ...
css 文本输出方式 采用textarea
weixin_30685029的博客
03-11 189
<HTML> <HEAD> <STYLEtype="text/css"> <!-- .content{}{ overflow-y:visible;border:0px;font-size:12px;font-family:宋体Fixedsys;line-height:150%;overflow:visible;bo...
css、js（vue）进行textarea自适应高度（超详细说明）
热门推荐
weixin_44784401的博客
05-23 1万+
css、js（vue）进行textarea自适应高度（超详细说明）
「HTML和CSS入门指南」textarea 标签详解
a451319296的博客
06-04 3417
textarea 标签是一个重要的标签，在 HTML 中用于创建多行文本输入框。使用 textarea 标签可以帮助您收集用户输入并提供更好的用户体验。在使用 textarea 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能、验证表单数据，并避免样式和行为问题。
用css固定textarea文本域大小尺寸
05-01 1757
textarea元素在chrome等浏览器下可以被拖拉从而改变大小，对于查看textarea里面的内容来说相当方便，但是有时候 我们为了保持网页的美观，不得不想要禁掉这个功能，禁止用户随意拉动textarea的大小，其实很简单，只需要用css加一个小小的属性，代码如下： textarea{ 　　resize:none; } 转载于:https://www.cnblog...
CSS文本框里的字_HTML & CSS 基础入门【8】表单
weixin_39760065的博客
11-20 490
前面前面我们已经熟悉了网页上一些常见的元素，如在网页上显示一段文字、一张图片、一个列表、一张表格等等。这些东西都是事先编辑好显示在页面上只提供给用户看的，实际上，我们可以把这样的页面称之为静态页面。有“静”就有”动”，自然也就有了动态页面，所谓动态页面就是在页面上能提供与用户产生交互的元素，比如：我们想注册成为某个网站的会员，就要填写注册信息提交给网站后台；我们在网上发表评论；我们在网上填写一些调...
css禁止textarea拖动
ICY___的博客
06-09 1173
resize:none;
ant design vue InputTextArea css处理高度自适应配置
04-26
为了让Ant Design Vue中的InputTextArea高度可以自适应，你需要使用CSS来配置它的高度。具体方法如下： 1. 给InputTextArea组件添加一个class，比如"autosize-textarea"。 2. 在CSS中定义这个class的样式，设置其...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值