Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
haizhilin2013 opened this issue May 20, 2019 · 16 comments
Open

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

haizhilin2013 opened this issue May 20, 2019 · 16 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

第35天 用一个div模拟textarea的实现
@haizhilin2013 haizhilin2013 added the html html label May 20, 2019
@xiangshuo1992
Copy link
Contributor 

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

@git710
Copy link

git710 commented May 21, 2019

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

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

这样就可以啦

@AnsonZnl
Copy link
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
Copy link

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

@xiangshuo1992
Copy link
Contributor

楼上都很赞

@tzjoke
Copy link

tzjoke commented May 28, 2019

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

@Vi-jay
Copy link

Vi-jay commented Jul 29, 2019 •
edited
Loading 

<div  contenteditable="true"></div>

@hc951221
Copy link

hc951221 commented Aug 7, 2019

楼上都是大佬，萌新佩服

@Konata9
Copy link

Konata9 commented Aug 31, 2019

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

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

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

@censek
Copy link

censek commented Nov 1, 2019

楼上们很强

@lizhesystem
Copy link

lizhesystem commented Apr 16, 2020 •
edited
Loading

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

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

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

@jim888666
Copy link

萌新佩服大佬，学到了

@blueRoach
Copy link

blueRoach commented Jul 6, 2020 •
edited
Loading 

  .edit{
    width: 300px;
    height: 200px;
    padding: 5px;
    border: solid 1px #ccc;
    resize: both;
    overflow:auto;
  }
<div class="edit" contenteditable="true"></div>

@smile-2008
Copy link

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

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

这样就可以啦

@jamesblues
Copy link

楼上都很棒！

@Iambecauseyouare
Copy link

div 设置contenteditable属性就可以做到实现textarea

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests