输入高度自适应contenteditable

最新推荐文章于 2023-04-11 22:20:11 发布
原创 最新推荐文章于 2023-04-11 22:20:11 发布 · 218 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

文章介绍了如何使用HTML的contenteditable属性创建一个可以自适应高度的编辑器。通过将contenteditable属性设置为true，可以将div转换为可编辑区域，从而实现输入内容时高度自动调整。此外，contenteditable还有false和plaintext-only两种模式，分别控制编辑器的编辑状态和粘贴文本的样式处理。

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

<div contenteditable></div>

contenteditable设置为false不可编辑

contenteditable设置为true可编辑

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

div模拟textarea文本域实现高度自适应效果代码
09-25
当我们决定使用div来模拟具有高度自适应效果的textarea文本域时，可以借助CSS中的min-height和max-height属性来实现。min-height属性定义了元素的最小高度，而max-height属性则定义了元素的最大高度。如果内容不足以...
Vue下textarea文本框根据内容自适应改变高度
10-20
在Vue.js框架中，开发网页应用时，我们经常会遇到需要创建一个可以自动调整高度的textarea元素，以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...
vue环境下基于contenteditable实现高度自适应多行文本域（div模拟<textareaa>）
wenmin1987的博客
12-25 1862
1、在web应用中，常用的多行文本输入&lt;textarea&gt;,满足了我们绝大部分的需求，唯一不足之处就是文本高度不能随内容自适应，如果需要高度自适应需要通过js脚本实现 2、div有天然的高度自适应，在加上个contenteditable属性，就可以变成一个文本内容自适应的多行文本输入框    &lt;div contenteditable="true"&gt;&lt;/div&gt...
contenteditable=“true“属性的标签输入框，内容实现高度自适应以及其他处理
Yukinoshita_kino的博客
12-24 7798
一. 功能需求 1.1输入框未获取焦点、失去焦点且输入框无内容的情况下，如下图： 1.2输入框获取焦点情况下，如下图： 1.3用户最多输入200个字符， 想要的效果如下图：（给出提示，只保留200个字符，且光标在文末） 而不是这样的效果，如下图：（光标跑到了文首） 1.4复制内容进输入框时，想要的效果如下图： 而不是这样的效果，如下图： 二. 代码实现 刚开始我选择的是textarea标签，但是该标签不能随着文本内容自动变化高度，需要通过js操作dom来动态改变，比较麻烦，我就放弃了。选择了HT
实现一个高度随内容变化，并且支持excel内容复制的输入框
tianxiaqiao的博客
01-11 187
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 2934
用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 5040
项目开发过程中，在展示用户录入意见信息时，使用el-input标签，type=”textarea”属性，在指定:row=”number”后，若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在IE环境下，该滚动条是隐藏的，用户体验性不好，故考虑实现文本框根据文本内容自适应高度的效果。应用代码如下： <template> <div class="my-textarea"> <textarea ref="textarea" :style="{'heig
使用div模拟textarea实现高度自适应
为了解决这个问题，开发者通常会使用JavaScript来实现高度自适应的效果，比如通过监听输入事件和计算内容长度来动态调整textarea的高度。 例如，Google Buzz的输入框就实现了这样的高度自适应。这种方法虽然有效，...
div实现自适应高度的textarea实现angular双向绑定
08-31
在开发Web应用时，我们经常需要处理用户输入的文本，特别是在聊天、评论等场景中，一个自适应高度的输入框可以提供更好的用户体验。在Angular框架中，通常使用`<textarea>`元素来实现这样的功能，但有时`<textarea>`...
input高度自适应
08-11
高度自适应的方法有三种。其中一种方法是使用div标签，并将contenteditable属性设置为true，如下所示： <div contenteditable=true> 这样，div标签就可以像textarea或input一样根据输入内容的高度进行自适应。<em>1...
ie11下页面显示不正常，hight获取不正确
a_c_c_a的专栏
12-02 2727
在前一阵子，公司的网站需要兼容ie11。在刚开始的时候，网站在ie11浏览器下显示会有异常，本应该是填充满整个浏览器的页面，现在高度只有250左右。 刚开始以为是html元素的css设置不对，一直在改样式，添加了各种height=100%都不能解决问题，后来使用代码获取元素的高度，发现这个高度一直是250，但是只要页面呈现出来后，再来获取高度，高度就变成正常了。然后我尝试着在onload事件里面
vue中textarea高度的设置_vue-textarea 自适应高度
weixin_39644915的博客
12-20 2428
需求简介一个搜索页面，上面输入框，下面列表展示搜索到的结果。重点是：产品要求搜索框默认显示一行，当输入的文字超过一行时，输入框的高度会随着改变，直到输入完毕。解决思路设想本想利用textarea实现，但textarea不支持自适应高度，而是定好高度或者是行数之后，超出部分就会显示滚动条。只能另想。根据需求，首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号自动变小的...
vue 实现 input自动换行并自适应高度_通过Vue实现vw/vh自适应单位
weixin_39796878的博客
11-30 4824
前言虽然现在可能响应式布局多一些，但是我还是觉得自适应单位比较好用。对于一些框架的UI组件，例如Vuetify，可能并不支持使用自适应单位，此时就会非常影响布局效果。这篇文章提供的方法可以帮助你实现这个功能，但是这个方法更适合实现需要在不同屏幕方向下使用不同长度单位的需求。仅对于实现vw/vh来说，这不是非常完美的方法。问题首先，vw/vh就是基于当前视窗的百分比，这个我就不再阐述了。我们来看一下...
vue中textarea自适应高度
weixin_30640769的博客
03-21 1416
HTML: <textarea class="myCircle_input" v-model="inputText" ref="elememt" @input="autoTextarea" :placeholder="pltxt"></textarea> data () { return { pltxt: "评论", inputText: '', ...
Vue - 聊天框功能（JwChat）
热门推荐
技术共享，共同进步！
09-07 1万+
聊天框功能（JwChat）
使用Vue+Textarea实现在文本内容变化时自适应高度
都随它大小便吧
03-22 5550
日常记录小技巧，使用Vue+Textarea实现在文本内容变化时自适应高度，还挺好用的。
vue-textarea 自适应高度
weixin_30606461的博客
04-25 723
需求简介 一个搜索页面，上面输入框，下面列表展示搜索到的结果。 重点是：产品要求搜索框默认显示一行，当输入的文字超过一行时，输入框的高度会随着改变，直到输入完毕。 解决思路设想 本想利用textarea实现，但textarea不支持自适应高度，而是定好高度或者是行数之后，超出部分就会显示滚动条。只能另想。 根据需求，首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号...
vue项目中textarea无法根据输入的内容自适应高度 爬坑
李小乐er
04-11 1310
刚开始掘金上找了一下 文章说样式上设置一个最小高度例如20px，然后可以通过监听textarea的input输入事件。直接在textarea输入内容时，给输入的样式高度先设置auto 后设置scrollHeight给输入的样式。直接通过input事件 给textarea高度赋值 并且在样式里也不用写最小高度 直接写一个。直接完美解决了输入内容和删减内容的时候 textarea文本框自适应高度。要求做一个可以输入的卡片，不管输入多少文字，输入的内容上下左右都居中。并且要在赋值之前 先赋最小默认值 代码如下。
vue组件封装--文本框根据输入内容自适应高度
weixin_44761091的博客
08-10 1885
文本框根据输入内容自适应高度
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值