输入高度自适应contenteditable

最新推荐文章于 2023-04-11 22:20:11 发布
最新推荐文章于 2023-04-11 22:20:11 发布
阅读量170 收藏
点赞数
分类专栏： vue2.0 HTML JS 文章标签： 前端 javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lml_little/article/details/129125424
版权
JS 同时被 3 个专栏收录
27 篇文章 0 订阅
订阅专栏
vue2.0
20 篇文章 0 订阅
订阅专栏
HTML
13 篇文章 0 订阅
订阅专栏

通常只有input、textarea编辑输入信息，但是不满足输入自适应高度。要实现输入同时自适应高度，可以使用contenteditable属性实现

<div contenteditable></div>

contenteditable设置为false不可编辑

contenteditable设置为true可编辑

contenteditable设置为plaintext-only粘贴文本不带样式

小虫信息科技
关注
专栏目录
html5 textarea高度自适应,textarea 高度自适应的两种方案
weixin_27310417的博客
06-20 672
原标题：textarea 高度自适应的两种方案本文转载于 SegmentFault 社区社区专栏：前端学习路-郭盖作者： 郭盖阅读全文你将获得以下解决方案：1. 点击长文本编辑textarea，自动获得焦点2. 随着输入值自动伸缩高度3. 可复制添加信息4. 可粘贴文本5. 可粘贴图片以下实例代码执行环境为 Chrome80方案一HTML5 Textarea 元素1. 自动获得焦点点击编辑自动获得...
html input高度自适应,模拟input输入框高度自适应
weixin_39868663的博客
07-01 2056
记得几年前就碰到过这种需求，现在又碰到了，解决方法就是用contenteditable属性来模拟textarea或者input来实现根据输入内容高度自适应,因为contenteditable属性的元素有自带的这个属性，但是这种模拟的有很多不确定的元素，比如说用户复制粘贴进去，会直接粘贴进去html，不是纯文本，怎么解决呢？？有三种办法，下面我们来看一下注: 如果在IOS上用contentedita...
vue环境下基于contenteditable实现高度自适应多行文本域（div模拟<textareaa>）
wenmin1987的博客
12-25 1736
1、在web应用中，常用的多行文本输入&lt;textarea&gt;,满足了我们绝大部分的需求，唯一不足之处就是文本高度不能随内容自适应，如果需要高度自适应需要通过js脚本实现 2、div有天然的高度自适应，在加上个contenteditable属性，就可以变成一个文本内容自适应的多行文本输入框    &lt;div contenteditable="true"&gt;&lt;/div&gt...
contenteditable=“true“属性的标签输入框，内容实现高度自适应以及其他处理
Yukinoshita_kino的博客
12-24 7314
一. 功能需求 1.1输入框未获取焦点、失去焦点且输入框无内容的情况下，如下图： 1.2输入框获取焦点情况下，如下图： 1.3用户最多输入200个字符， 想要的效果如下图：（给出提示，只保留200个字符，且光标在文末） 而不是这样的效果，如下图：（光标跑到了文首） 1.4复制内容进输入框时，想要的效果如下图： 而不是这样的效果，如下图： 二. 代码实现 刚开始我选择的是textarea标签，但是该标签不能随着文本内容自动变化高度，需要通过js操作dom来动态改变，比较麻烦，我就放弃了。选择了HT
实现一个高度随内容变化，并且支持excel内容复制的输入框
tianxiaqiao的博客
01-11 143
1、思路由于input框无法实现超出换行，所以要用textarea，然后用一个div标签，添加contenteditable="true"属性，这样div中可以输入内容，并且可以超出换行，也可以把div元素高度顶起来，这样就可以实现自适应的输入框了 2、代码： html <form id="box"> <!-- 高度自适应输入框,可用在from表单中 --> <textarea name="" id="first-input"></textare
用div的contenteditable = true做文本编辑器 光标的设置方法
jievachange
11-20 2851
用div的contenteditable = true做文本编辑器的方法 function set_focus(el) {   el=el[0];  // jquery 对象转dom对象   el.focus();   if($.browser.msie){   //上面是ie的写法 var rng;   el.focus();   rng = document.s
Vue进阶（幺叁玖）：textarea文本框根据内容自适应改变高度
IT全栈 华强工作室
10-24 4805
项目开发过程中，在展示用户录入意见信息时，使用el-input标签，type=”textarea”属性，在指定:row=”number”后，若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在IE环境下，该滚动条是隐藏的，用户体验性不好，故考虑实现文本框根据文本内容自适应高度的效果。应用代码如下： <template> <div class="my-textarea"> <textarea ref="textarea" :style="{'heig
div模拟textarea文本域实现高度自适应效果代码
09-25
当我们决定使用div来模拟具有高度自适应效果的textarea文本域时，可以借助CSS中的min-height和max-height属性来实现。min-height属性定义了元素的最小高度，而max-height属性则定义了元素的最大高度。如果内容不足以...
html文本域 高度自适应,实现高度内容自适应的 textarea
weixin_39640573的博客
06-18 1584
背景介绍正如我们所知道的 textarea 是一个行内块元素 display: inline-block 并且它的默认宽高由 cols & rows 决定, 也就是说 textarea 的 height 并不会自适应于内容长度.那么, 我们今天的任务就是来思考如何创建一个 高度内容自适应的 textarea 组件，我将介绍三种思路实现 高度内容自适应的 textarea，具体代码 text...
Vue下textarea文本框根据内容自适应改变高度
10-20
在Vue.js框架中，开发网页应用时，我们经常会遇到需要创建一个可以自动调整高度的textarea元素，以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...
vue中textarea高度的设置_vue-textarea 自适应高度
weixin_39644915的博客
12-20 2166
需求简介一个搜索页面，上面输入框，下面列表展示搜索到的结果。重点是：产品要求搜索框默认显示一行，当输入的文字超过一行时，输入框的高度会随着改变，直到输入完毕。解决思路设想本想利用textarea实现，但textarea不支持自适应高度，而是定好高度或者是行数之后，超出部分就会显示滚动条。只能另想。根据需求，首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号自动变小的...
vue 实现 input自动换行并自适应高度_通过Vue实现vw/vh自适应单位
weixin_39796878的博客
11-30 4616
前言虽然现在可能响应式布局多一些，但是我还是觉得自适应单位比较好用。对于一些框架的UI组件，例如Vuetify，可能并不支持使用自适应单位，此时就会非常影响布局效果。这篇文章提供的方法可以帮助你实现这个功能，但是这个方法更适合实现需要在不同屏幕方向下使用不同长度单位的需求。仅对于实现vw/vh来说，这不是非常完美的方法。问题首先，vw/vh就是基于当前视窗的百分比，这个我就不再阐述了。我们来看一下...
vue中textarea自适应高度
weixin_30640769的博客
03-21 1372
HTML: <textarea class="myCircle_input" v-model="inputText" ref="elememt" @input="autoTextarea" :placeholder="pltxt"></textarea> data () { return { pltxt: "评论", inputText: '', ...
Vue - 聊天框功能（JwChat）
技术共享，共同进步！
09-07 9817
聊天框功能（JwChat）
使用Vue+Textarea实现在文本内容变化时自适应高度
都随它大小便吧
03-22 5140
日常记录小技巧，使用Vue+Textarea实现在文本内容变化时自适应高度，还挺好用的。
vue-textarea 自适应高度
weixin_30606461的博客
04-25 656
需求简介 一个搜索页面，上面输入框，下面列表展示搜索到的结果。 重点是：产品要求搜索框默认显示一行，当输入的文字超过一行时，输入框的高度会随着改变，直到输入完毕。 解决思路设想 本想利用textarea实现，但textarea不支持自适应高度，而是定好高度或者是行数之后，超出部分就会显示滚动条。只能另想。 根据需求，首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号...
vue项目中textarea无法根据输入的内容自适应高度 爬坑
最新发布
李小乐er
04-11 1183
刚开始掘金上找了一下 文章说样式上设置一个最小高度例如20px，然后可以通过监听textarea的input输入事件。直接在textarea输入内容时，给输入的样式高度先设置auto 后设置scrollHeight给输入的样式。直接通过input事件 给textarea高度赋值 并且在样式里也不用写最小高度 直接写一个。直接完美解决了输入内容和删减内容的时候 textarea文本框自适应高度。要求做一个可以输入的卡片，不管输入多少文字，输入的内容上下左右都居中。并且要在赋值之前 先赋最小默认值 代码如下。
vue组件封装--文本框根据输入内容自适应高度
weixin_44761091的博客
08-10 1735
文本框根据输入内容自适应高度
使用contenteditable+div模拟textarea文本域实现高度自适应
weixin_34297300的博客
10-27 410
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size插件来做到textarea的高度自适应，后来因为遇到一些问题，而且也多加了依赖缺乏可定制，所以决定使用contenteditable来实...
使用div模拟textarea实现高度自适应
为了解决这个问题，开发者通常会使用JavaScript来实现高度自适应的效果，比如通过监听输入事件和计算内容长度来动态调整textarea的高度。 例如，Google Buzz的输入框就实现了这样的高度自适应。这种方法虽然有效，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值