Skip to content

[html] 第35天 用一个div模拟textarea的实现 #128

New issue
New issue
Open
Open
[html] 第35天 用一个div模拟textarea的实现#128
Labels
htmlhtml
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on May 20, 2019
Collaborator

第35天 用一个div模拟textarea的实现

Activity

haizhilin2013
added
htmlhtml
on May 20, 2019
xiangshuo1992

xiangshuo1992 commented on May 21, 2019

@xiangshuo1992
xiangshuo1992
on May 21, 2019
Contributor
  <div class="edit" contenteditable="true">这里是可以编辑的内容，配合容器的 overflow ，多行截断，自定义滚动条，简直好用的不要不要的</div>
git710

git710 commented on May 21, 2019

@git710
git710
on May 21, 2019

上面的代码实现了div变为可编辑状态,但是textarea标签可以在右下角自由拉伸

<div class="edit" contenteditable="true" style="resize: both"></div>

这样就可以啦

AnsonZnl

AnsonZnl commented on May 21, 2019

@AnsonZnl
AnsonZnl
on May 21, 2019
Contributor

哈哈 ，在补充一点，加上overflow:auto;会更像哦；
补充一下完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>用一个div模拟textarea的实现</title>
</head>
<style>
.edit{
    width: 300px;
    height: 200px;
    padding: 5px;
    border: solid 1px #ccc;
    resize: both;
    overflow:auto;
}
</style>
<body>
    <h3>用一个div模拟textarea的实现</h3>
      <div class="edit" contenteditable="true">
        这里是可以编辑的内容，配合容器的 overflow ，多行截断，自定义滚动条，简直好用的不要不要的。
    </div>
</body>
</html>

我在codepen上做了一个演示地址，有兴趣的可以查看：https://codepen.io/ansonznl/pen/LozrgK

18163759011

18163759011 commented on May 21, 2019

@18163759011
18163759011
on May 21, 2019

加上一个最小高度和最小宽度，这样用户体验会更好

xiangshuo1992

xiangshuo1992 commented on May 22, 2019

@xiangshuo1992
xiangshuo1992
on May 22, 2019
Contributor

楼上都很赞

tzjoke

tzjoke commented on May 28, 2019

@tzjoke
tzjoke
on May 28, 2019

如果样子也要像的话，可以加上 appearance 属性。。。

Vi-jay

Vi-jay commented on Jul 29, 2019

@Vi-jay
Vi-jay
on Jul 29, 2019 · edited by Vi-jay
<div  contenteditable="true"></div>
hc951221

hc951221 commented on Aug 7, 2019

@hc951221
hc951221
on Aug 7, 2019

楼上都是大佬，萌新佩服

Konata9

Konata9 commented on Aug 31, 2019

@Konata9
Konata9
on Aug 31, 2019

主要是利用了 HTML5 提供的 contenteditable 属性，让普通的 div 可以进行编辑。
结合 CSS 可以做到拉伸、滚动等效果。

如果需要对输入的值进行处理，就还需要用上 JS。

codepen 地址：https://codepen.io/Konata9/pen/yLBovJE

censek

censek commented on Nov 1, 2019

@censek
censek
on Nov 1, 2019

楼上们很强

lizhesystem

lizhesystem commented on Apr 16, 2020

@lizhesystem
lizhesystem
on Apr 16, 2020 · edited by lizhesystem

添加一点，如果设置contenteditable="true" 属性后，如果直接复制html内容的话会出现把样式也复制进去。

如果不需要该需求的话可以设置 contenteditable="plaintext-only"就可以了，这个属性代表只可输入纯文本，但是复制的格式还是存在的。

contenteditable 属性可以设置这几个值："events", "caret", "typing", "plaintext-only", "true", and "false"

jim888666

jim888666 commented on May 11, 2020

@jim888666
jim888666
on May 11, 2020

萌新佩服大佬，学到了

blueRoach

blueRoach commented on Jul 6, 2020

@blueRoach
blueRoach
on Jul 6, 2020 · edited by blueRoach
  .edit{
    width: 300px;
    height: 200px;
    padding: 5px;
    border: solid 1px #ccc;
    resize: both;
    overflow:auto;
  }
<div class="edit" contenteditable="true"></div>
smile-2008

smile-2008 commented on Oct 21, 2020

@smile-2008
smile-2008
on Oct 21, 2020

上面的代码实现了div变为可编辑状态,但是textarea标签可以在右下角自由拉伸

<div class="edit" contenteditable="true" style="resize: both"></div>

这样就可以啦

2 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    htmlhtml

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@xiangshuo1992@blueRoach

        Issue actions
          [html] 第35天 用一个div模拟textarea的实现 · Issue #128 · haizlin/fe-interview