添加按钮后，Contenteditable属性不起作用

Question

我想创建一个contenteditable div，用户可以在其中发表评论。我用这个

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

这很好，我现在可以在里面写任何东西了。

但是当我尝试在其中添加提交按钮时（我必须创建按钮contenteditable:false，因为contenteditable是继承属性，我们也会自动应用于按钮）

但现在我不能在里面写任何东西。

https://jsfiddle.net/amok08yg/1/

请帮忙。

Answer 1

我想你想要这样的东西：）

＆＃13;

＆＃13;

body{background:gray}
.input_wrapper {
  background: white;
  position: relative;
  width:300px; 
  height:auto;
  margin-left:40px; 
  margin-top:50px;
  margin-bottom:30px;
  padding: 12px 6px 6px;
  box-sizing: border-box;
  display: inline-block;
}
#uploadcomment { 
  padding: 0;
  border: none;
  border-bottom:1px solid lightgray;
  font-size:1.1em;
  width: calc(100% - 6px);
  height: 100px;
  max-width: calc(100% - 6px);
  float: right;
  }
#uploadcomment:active, #uploadcomment:focus {
  outline: none;
}
#submitcomment {
  background: transparent;
  border: none;
  margin-top: 6px;
  float: right;
  line-height: 160%;
  }

＆＃13;

<div class="input_wrapper">
  <textarea id="uploadcomment" placeholder="Describe yourself here..."></textarea>
  <button id="submitcomment"contenteditable="false">SUBMIT</button>
</div>

＆＃13;

＆＃13;

＆＃13;