div模拟textarea实现输入高度自适应效果

最新推荐文章于 2024-05-07 19:36:34 发布
最新推荐文章于 2024-05-07 19:36:34 发布
阅读量525 收藏
点赞数
分类专栏： js 前端
本文链接：https://blog.csdn.net/sufubo/article/details/84543206
版权
前端 同时被 2 个专栏收录
91 篇文章 0 订阅
订阅专栏
js
79 篇文章 0 订阅
订阅专栏

核心代码

  • 使用contenteditable="true"属性
<div data-v-b0c64392=""
        contenteditable="true"
        spellcheck="false"
        placeholder="输入评论..."
        class="rich-input"></div>
  • 设置最小高度
min-height: 24px;

完整代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .rich-input[data-v-b0c64392] {
            position: relative;
            font-size: 14px;
            line-height: 1.7;
            color: #17181a;
            outline: none;
            min-height: 24px;
            background-color: #fff;
            border: 1px solid #f1f1f1;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div data-v-b0c64392=""
        contenteditable="true"
        spellcheck="false"
        placeholder="输入评论..."
        class="rich-input"></div>
</body>
</html>

在线运行示例

https://jsfiddle.net/000000/xpq619vy/

遇到的问题

在移动端的时候经常用到fastclick库导致touch无法聚焦。我们使用

.needsclick {
	content: attr(placeholder); 
	color: #B8B8B8;
}

<div contentEditable="true" class="needsclick" placeholder="请输入详细地址"></div>

这样就可以聚焦了。添加neecsclick类。

原理

  • 原因

Fastclick在touchend事件触发时使用document.createEvent触发click事件来解决click在移动端的延迟，同时拦截原生的click事件。这样div就获取不到原生的click事件，focus也失效。这也是为什么pc端没问题，因为pc端没有touch事件

  • 解决办法

官方文档有说明

Advanced
Ignore certain elements with needsclick
Sometimes you need FastClick to ignore certain elements. You can do this easily by adding the needsclick class.

<a class="needsclick">Ignored by FastClick</a>
vieber
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV 模拟 textarea
FOR 的博客
07-20 1123
呼呼呼~ textarea: 为什么？你已经无所不在了，还想着代替我？ div:不好意思了，你在你的领域确实很强大，但是input不能换行，而你却一言不合就出现滚动条，你得知道，这有时候，很丑。 textarea: 其实我是可以高度适应的，you look <style> textarea { padding: 0; } </style> <body> <textarea name="" id="area" cols="34"
div模拟textarea文本域实现高度自适应效果代码
09-25
textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
weixin_44784401的博客
07-07 4522
textarea自适应高度二——（设置隐藏div获取高度和仿element-ui组件）
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
最新发布
2401_84094908的博客
05-07 704
# 使用 contenteditable=“true” 实现的文本框全选内容# 输入框贴贴去除样式并插入到指定光标位置（contenteditable=“true” 实现的输入框也支持）一、 实现 1、给 添加 属性，使 元素变成用户可编辑。2、给 添加 样式，使 可以被用户调整尺寸，注意：同时需要设置 样式，因为 样式不适用于 的块，不然 不会生效，。 支持输入框拉伸的属性：、、3、增加一个 属性，通过 控制显示。二、 实现 1、给 添加 属性，使 元素变成用户可编辑。2、给
vue-textarea 自适应高度
weixin_30606461的博客
04-25 636
需求简介 一个搜索页面，上面输入框，下面列表展示搜索到的结果。 重点是：产品要求搜索框默认显示一行，当输入的文字超过一行时，输入框的高度会随着改变，直到输入完毕。 解决思路设想 本想利用textarea实现，但textarea不支持自适应高度，而是定好高度或者是行数之后，超出部分就会显示滚动条。只能另想。 根据需求，首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号...
js控制textarea文本域自适应高度
祥子的博客
06-30 5342
autoresizing textarea textarea { width:360px; border: 0 none white; overflow: hidden; padding: 0; outline: none; background-color: #D0D0D0; resize: none; margin-top:30px; margin-left:400px
如何用div模仿textarea
smileboyjian的博客
07-19 2220
//h5新属性,让元素可以编写 <div contenteditable="true">     .....此处省略..... 给div设置css  主要属性有 div{     width: 100px;     min-height: 100px;         max-height: 300px;     padding: 3px
div模拟textarea，解决高度自适应
11-28
解决textarea文字太多无法高度自适应问题，使用div模拟textarea
div实现自适应高度的textarea实现angular双向绑定
01-19
过程中我遇到的一个问题就是QQ输入框，自适应高度，最高高度为3row。 如果你也像我一样打算使用textarea，那么很抱歉，你一开始就错了。 textarea不是不可以的，然后我是这样错的。（就是监听scroll 如果出现了，就...
textarea高度自适应js代码
01-06
4. **测量内容高度**：每次输入事件触发后，获取textarea的实时内容，然后在隐藏的div（或者使用其他方式）中模拟渲染这部分内容，测量这个div的高度。 5. **调整textarea高度**：将textarea的高度设置为测量得到的...
textarea 输入框自适应高度
04-07
NULL 博文链接：https://xiaojin21cen.iteye.com/blog/1560814
定宽的textarea根据内容自动调整高度
04-20
NULL 博文链接：https://hanxin0311.iteye.com/blog/1886670
div模拟textarea文本域实现高度自适应
slqt_6688的博客
07-27 3225
看完张鑫旭的关于“div模拟textarea文本域轻松实现高度自适应”这篇文章，我自己来总结一下： 一、textarea表单元素： 一般用于评论和留言框的实现，我们可以设置它的cols和rows值来限制它的看见区域和可见行数，不过更好的办法是使用 CSS 的 height 和 width 属性来设置textarea的高度和宽度。请看下面例子： &lt;textarea name="name...
vue使用div写一个文字域（textarea）怎么写？？？（contenteditable=“true“属性让div+css可以相当于Input）
lqlq54321的博客
11-24 1246
如何实现 <div contenteditable="true">可以编辑里面的内容</div> Div+CSS如何模拟textarea文本域高度自适应以达到html5标准的contenteditable属性 主要通过为标签添加HTML5中的contenteditable属性达到此效果（contenteditable：规定是否允许用户编辑内容），很棒的是，此属性IE也会支持，所以不用再为兼容问题太去纠结了 <div class="tx
在线代码编辑器的实现原理与思路探讨？
ACM Dream
01-13 1万+
在线代码编辑器      在线编辑各种文本形式的源代码，如js,html,php等，要支持语法高亮，即时输入即时高亮。  我的初步想法是用一个<div contenteditable>来实现，就是类似于常见的在线网页编辑器，但是因为仅仅是需要代码编辑，所以，要控制只能输入文本，不能让用户插入图片啊链接啊等等东西，感觉比较难。  希望大家能够探讨一下如何实现。  Bespin
textarea的高度自适应
热门推荐
樊小书生
03-16 1万+
textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。
css中解决textarea高度随内容自适应的问题
大白兔
05-05 4608
目前的输入框实现有两种方法： - input input输入框只能实现一行，里面的内容不能分行显示 - textarea textarea可以实现多行输入，但是高度却无法自适应，并且会遇到textarea始终会与下面有一段间距，解决方法：加（vertical-align: middle;）即可那么言归正传，如何实现多行输入并且高度随内容自适应呢？textarea确实无法实现（我目前所知道的）
div实现高度自适应并限制输入字数
front_end_fan
07-28 3239
div模拟textarea实现高度随着内容自适应，并用js限制输入字数一、jQuery版<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>collap
textarea自适应窗口的宽度的代码
happyzhen的专栏
12-02 1207
textarea自适应窗口的宽度的代码   添加日期：2008-8-9 12:58:54     [大 中 小]   首先，原则上实现textarea自适应必须适用css，不能直接适用“width＝100%”这样的写法，具体示例： &lt;style&gt;textarea{width:100%;height:100%;}&lt;/style&gt;&lt;textarea...
ant design vue InputTextArea css处理高度自适应配置
04-26
为了让Ant Design Vue中的InputTextArea高度可以自适应，你需要使用CSS来配置它的高度。具体方法如下： 1. 给InputTextArea组件添加一个class，比如"autosize-textarea"。 2. 在CSS中定义这个class的样式，设置其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值