怎么用div模拟textarea(鄙视题)

最新推荐文章于 2024-06-07 10:24:08 发布
最新推荐文章于 2024-06-07 10:24:08 发布
阅读量120 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39531049/article/details/118756506
版权

html5 css
怎么用div模拟textarea(鄙视题)

前些日子，准备跳槽到了一家创业型的公司，进去就是 面试官一脸严肃的考一些，关于前端的基础知识。

可是当他问了我这个问题的时候，我当时就闷了。

请问一下如何用一个div模拟textarea?

这是什么问题？ 这么冷门？

回去之后在网上查了一下。恍然大悟。直接上代码：

  <div style="width:500px;min-height:50px;border:1px solid #ddd;" contenteditable="true"  id="divContaienr"></div>

一个属性就搞定了！！！

别再NULL了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用div来模拟textarea的实现
weixin_41970780的博客
11-30 224
用div来模拟textarea的实现 <style> div{ width: 400px; min-height: 100px; max-height: 300px; _height: 100px; //IE6 margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-si
DIV 模拟 textarea
FOR 的博客
07-20 1121
呼呼呼~ textarea: 为什么？你已经无所不在了，还想着代替我？ div:不好意思了，你在你的领域确实很强大，但是input不能换行，而你却一言不合就出现滚动条，你得知道，这有时候，很丑。 textarea: 其实我是可以高度适应的，you look <style> textarea { padding: 0; } </style> <body> <textarea name="" id="area" cols="34"
用一个div模拟textarea的实现【前端每日一题-15】
weixin_30814329的博客
07-30 534
用一个div模拟textarea的实现？考点：contenteditable属性答案：<!DOCTYPE html> <head> <title>div模拟textarea</title> <style> .editdiv{ border:1px solid #a0b3d6; ...
将div渲染成textarea框，类似于ant design 的TextArea
最新发布
【爱打盹的喵】的专栏
06-07 178
原始效果输入时效果。
div标签模拟textarea
Scarborough_Coral的博客
10-02 343
div标签模拟textarea 只需要将div设为contenteditable即可以下是例子 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8">
angularjs使用div模拟textarea文本框的方法
12-29
* div模拟textarea输入框双向数据绑定指令 */ .directive('contenteditable', [function() { return { require: 'ngModel', link: function(scope, element, attrs, ctrl) { //view -> m
div模拟textarea文本域实现高度自适应效果代码
11-21
textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框： 作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足...
div模拟textarea，解决高度自适应
11-28
解决textarea文字太多无法高度自适应问题，使用div模拟textarea
div模拟实现textarea效果
liya_nan的博客
08-16 3466
效果展示： 代码实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;div实现textarea效果&lt;/title&gt; &lt;style&gt; #textarea { height: 200px; width: 300px; ...
用一个div模拟textarea的实现
初漾的博客
06-13 5634
转自：http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/   by zhangxinxu 1.contenteditable 属性规定是否可编辑元素的内容。 contenteditable 属性是 HTML5 中的新属性。 2.之前的文章提到过过滤HTML的方法，保证内容都是纯
div 仿 功能健全的textArea，实现监听
来者往者
12-11 1389
神奇的div实现textarea 文本编辑
html用div模拟文本框,如何使用div模拟实现textarea？
weixin_35062801的博客
06-08 1652
我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？首先来看看实现的效果是什么样的。实现效果关键属性...
div 模拟textarea文本域实现可编辑且高度自适应
记录点滴
05-31 976
看到标题很多人想用只能用js来实现吧！今天介绍一个标签属性可以让一个block块元素实现可编辑，且高度随内容自适应。 contenteditable ="true/false" 定义： 顾名思义，允许用户编辑元素内容，包含任意文本，且包含子元素。 使用： 给一个普通的block元素，加上contenteditable="true" 即可: <div style="width: 150px;" contenteditable="true">我是一个div</div> .
div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
若末lan的博客
05-20 1948
需求： 文本框可根据输入内容高度自适应，不带滚动条，高度可变的那种，我搜索了很多，发现textarea无法实现我的需求，scrollHeigh这个无法获取实际内容的高度（我用的是那种简单的，可能我写的哪里不对吧；那种代码很多的，我又不想那么去做，麻烦。。。），所以只能div模拟textarea文本框了。 使用div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制，输入字数超...
div模拟textarea文本域实现高度自适应
slqt_6688的博客
07-27 3225
看完张鑫旭的关于“div模拟textarea文本域轻松实现高度自适应”这篇文章，我自己来总结一下： 一、textarea表单元素： 一般用于评论和留言框的实现，我们可以设置它的cols和rows值来限制它的看见区域和可见行数，不过更好的办法是使用 CSS 的 height 和 width 属性来设置textarea的高度和宽度。请看下面例子： &lt;textarea name="name...
如何用div模仿textarea
smileboyjian的博客
07-19 2218
//h5新属性,让元素可以编写 <div contenteditable="true">     .....此处省略..... 给div设置css  主要属性有 div{     width: 100px;     min-height: 100px;         max-height: 300px;     padding: 3px
div模拟textarea
05-26
可以使用contenteditable属性来实现div模拟textarea的效果，代码如下： ``` <div contenteditable="true"></div> ``` 通过设置contenteditable属性为true，使得该div可以被编辑，从而模拟出textarea的效果。需要注意的是，由于div的高度不会自动随着内容的增加而增加，因此需要通过CSS设置其高度或使用JavaScript动态调整高度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别再NULL了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值