Html中用div标签代替textarea标签实现类似office中文本框的效果（自适应高、宽）

最新推荐文章于 2024-01-07 21:29:43 发布
最新推荐文章于 2024-01-07 21:29:43 发布
阅读量2.1k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33398790/article/details/80447180
版权


<div contenteditable="true" 

  style="width: 400px; 

    min-height: 120px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;

    -webkit-user-modify: read-write-plaintext-only;"></div>



Html代码如下

<!DOCTYPE html >
<html>
<head>
<style ></style>
</head>
<body>
    <div contenteditable="true" style="width: 400px; 
        min-height: 120px; 
        max-height: 300px;
        _height: 120px; 
        margin-left: auto; 
        margin-right: auto; 
        padding: 3px; 
        outline: 0; 
        border: 1px solid #a0b3d6; 
        font-size: 12px; 
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-user-modify: read-write-plaintext-only;">
    <span style="font-family:'Times New Roman';color:rgb(0,112,192);font-weight:bold;font-size:11.0000pt;">text</span>
    </div>
</body>
</html>

梦九龍
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
textarea的替代品div.contenteditable
qq_16945933的博客
01-29 1323
标签定义多行文本属性控件，可容纳无限数量的文本，通过cols，rows属性设置textarea尺寸，当然也可以用css的width、height属性。 需求： textare作为文本输入固然好用，但是在实际项目中，通过平台识别出来的原文和译文内容，需要默认展示出所有的字幕内容，不能滑动，textare无法自适应文字的高度，用户使用非常不方便，每次都要去拖拽textare的高度。 第一波尝试：可编辑div（引发了其他问题，时间紧急直接放弃了） 刚开始采用了div.contenteditable可编辑的div，
Html中用div标签代替textarea标签实现类型office中文本框的效果（自适应高、宽）...
weixin_30909575的博客
05-25 123
<div contenteditable="true" style="width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; out...
java替换TextArea内容可显示在html其他标签格式
light的博客
08-19 377
/** * 替换TextArea内容可显示格式. * * @param textAreaContent TextArea内容 * @return String */ public static String replaceTextAreaToHtml(String textAreaContent) { return textAreaContent.replaceAll("\\r\\n", "<br/>").repl...
html用div模拟文本框,如何使用div模拟实现textarea？
weixin_35062801的博客
06-08 1647
我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？首先来看看实现的效果是什么样的。实现效果关键属性...
Vue 自定义仿word表单输入框组件，让操作更符合用户习惯
最新发布
gdgztt的专栏
01-07 623
Vue 自定义仿word表单输入框组件，让操作更符合用户习惯
div模拟textarea文本域实现高度自适应效果代码
09-25
textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。
div实现自适应高度的textarea实现angular双向绑定
08-31
本文将探讨如何用`div`实现自适应高度的textarea，并在Angular中实现双向数据绑定。 首先，为什么不用传统的`<textarea>`？虽然`<textarea>`可以设置固定行数并允许用户输入多行文本，但是它并不方便实现动态高度...
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
12-13
在有些时候我们完全可以用DIV去替代input或者textarea来达到同样的效果，例如，在使用ajax的时候，在提交表单时我们可以获取DIV的内容。 细心的人会发现，QQ空间中的发表说说的文本框其实就是一
很实用的仿OFFICE2007网页后台编辑器
09-03
能与WORD排版的文档复制到里面，可预览。是网站后台编辑器的好帮手。
用p标签实现和textarea标签显示相同的效果
--柴犬馒头--的博客
07-22 898
首行缩进：text-indent:2em; 用p标签实现和textarea标签显示相同的效果：style='white-space: pre-wrap;
HTML 类似word编辑器 3.0版本
10-28
HTML 类似word编辑器 3.0版本 完全开源
像word的 HTML文本编辑器
03-20
HTML文本编辑器，功能强大，有像word一样的编辑区域，纯JS编写，小巧轻便，可以按自己所需要的定义编辑区域。
HTML文本框样式
10-25
各种HTML文本框样式，看看有没有你想要的。
JavaScript仿Office颜色选择器
上善若水
02-03 220
     摘要:   &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; Office 风格颜色选择器&lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus"&gt; &lt;META NAME="Author" CONTENT=""&gt; &
如何在html中在线编辑word文档,web版word在线编辑
weixin_39845113的博客
06-04 6055
谁能提供在网页中嵌入Word直接进行在线编辑功能的知识和源码WORD在线编辑的方案有几种。1)采用网页插件，比如PageOffice，这种方案实际是调用本地Office进行编辑，确切的说是网页编辑而非在线编辑。2)采用微软的OWA，这个是网页版的Office，好处确实是Word，缺点是网页版功能比本地版本弱，开发难以得到微软的支持，坑很多，碰到了也不知道怎么解决。与之接近的是一起写，石墨这样的类W...
可编辑div的使用，实现类似textarea功能
qq_36637705的博客
07-14 5189
可编辑的div代替textarea
html div 变化,html中用div代替textarea实现输入框高度随输入内容变化
weixin_42366533的博客
06-29 503
项目中的需求:留言栏输入高度变化，超过1行时，自动伸展，超过4行后，不再伸展。主要思想是利用最小高度和最大高度，再加上overflow来实现，到了最大高度，文字不会溢出而是隐藏。根据文本框中字体的大小，高度需要适当调整。代码：#leave-message-textarea{width: 100%;min-height:20px;max-height:70px;outline:;border: 1p...
html页面仿word文档样式（vue页面也适用）
夏日漱石的博客
09-23 654
html页面仿word文档样式（vue页面也适用）
Html状态属性,HTML 之 ContentEditable 属性
weixin_42515364的博客
05-31 298
HTML中的contentEditable的属性可以打开某些元素的可编辑状态，也许你没用过contentEditable属性，甚至从未听说过，contentEditable的作用相当神奇，可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,table,p,span,body,等等很...
textarea标签高度自适应
09-02
要使textarea标签的高度自适应，你可以使用以下方法： 1. 使用CSS的属性进行控制： 设置textarea的高度为auto，这将允许它根据内容来自动调整高度。同时，使用box-sizing属性设置为border-box，以确保文本内容不会溢出textarea。 ```css textarea { height: auto; box-sizing: border-box; } ``` 2. JavaScript动态计算高度： 通过监听textarea的输入事件，可以实时获取到其内容的高度，并将该高度应用到textarea上。 ```javascript const textarea = document.querySelector('textarea'); textarea.addEventListener('input', function() { this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; }); ``` 这样，无论用户输入多少内容，textarea的高度都会自动适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值