如何在文本区域更改div？

Question

我有一个看起来像消息提示框的div。在“编辑”上，我想使用“保存”按钮将其切换到文本区域。以下是我对HTML和CSS的投入。有人可以帮忙吗？

function divClicked() {
  var divHtml = $(this).prev('div').html();
  var editableText = $("<textarea />");
  editableText.val(divHtml);
  $(this).prev('div').replaceWith(editableText);
  editableText.focus();
  // setup the blur event for this new textarea
  editableText.blur(editableTextBlurred);
}

function editableTextBlurred() {
  var html = $(this).val();
  var viewableText = $("<div>");
  viewableText.html(html);
  $(this).replaceWith(viewableText);
  // setup the click event for this new div
  viewableText.click(divClicked);
}

$(document).ready(function() {
  $(".edit-message").click(divClicked);
});

.comment-block {
  color: rgb(0, 0, 0, .7);
  padding: 1rem;
  border: 1px solid #b4bbc6;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  background-color: #FFFFFF;
  display: table-cell;
  vertical-align: top;
}

.bottom-comment {
  color: #acb4c2;
  font-size: 0.875rem;
  margin-bottom: 25px;
  margin-top: 0px;
}

.comment-author {
  float: left;
  font-weight: 600;
  font-size: 14px;
  color: black;
}

.comment-date {
  color: #90949c;
  font-size: 11px;
  float: right;
  margin-left: 10px;
}

.comment-text {
  margin-bottom: 1.25rem;
  font-size: 14px;
  font-family: inherit;
  line-height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment-block edit-message">
  <div class="bottom-comment">
    <div class="comment-author">Guestname</div>
    <div class="comment-date">Aug 24, 2014 at 23:35</div>
  </div>
  <p class="comment-text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit quasi sapiente
    modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?
    <a href="#">Edit your message</a>
  </p>
</div>

Answer 1

您可以使用一些JS。

我相信这就是您要寻找的：

edit = () => {
  let commentText = document.querySelector('.comment-text');

  let textArea = document.createElement('textarea');
  // Set the content of the textarea to the content of the `.comment-text` box
  textArea.innerHTML = commentText.innerHTML;
  // Added a class so you may do some styling in CSS
  textArea.setAttribute('class', 'comment-textarea');
  commentText.parentNode.replaceChild(textArea, commentText);
}

.comment-block {
  color: rgb(0, 0, 0, .7);
  padding: 1rem;
  border: 1px solid #b4bbc6;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  background-color: #FFFFFF;
  vertical-align: top;
}

.bottom-comment {
  color: #acb4c2;
  font-size: 0.875rem;
  margin-bottom: 25px;
  margin-top: 0px;
}

.comment-author {
  float: left;
  font-weight: 600;
  font-size: 14px;
  color: black;
}

.comment-date {
  color: #90949c;
  font-size: 11px;
  float: right;
  margin-left: 10px;
}

.comment-text {
  margin-bottom: 1.25rem;
  font-size: 14px;
  font-family: inherit;
  line-height: 20px;
}


/* You could style your text area how you would like here */

.comment-textarea {
  margin-bottom: 1.25rem;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  line-height: 20px;
}

<div class="comment-block">
  <div class="bottom-comment">
    <div class="comment-author">Guestname</div>
    <div class="comment-date">Aug 24, 2014 at 23:35</div>
  </div>
  <p class="comment-text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit quasi sapiente
    modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?
    <a href="#" onclick="edit()">Edit your message</a>
  </p>
</div>

此外，如果您要切换它，则可以这样操作：

edit = () => {
  let commentText = document.querySelector('.comment-text');
  let replacement;
  if (commentText.classList.contains('active')) {
    replacement = document.createElement('p');
    replacement.setAttribute('class', 'comment-text');
  } else {
    replacement = document.createElement('textarea');
    replacement.setAttribute('class', 'comment-text active');
  }
  replacement.innerHTML = commentText.innerHTML;
  commentText.parentNode.replaceChild(replacement, commentText);
}

.comment-block {
  color: rgb(0, 0, 0, .7);
  padding: 1rem;
  border: 1px solid #b4bbc6;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  background-color: #FFFFFF;
  vertical-align: top;
}

.bottom-comment {
  color: #acb4c2;
  font-size: 0.875rem;
  margin-bottom: 25px;
  margin-top: 0px;
}

.comment-author {
  float: left;
  font-weight: 600;
  font-size: 14px;
  color: black;
}

.comment-date {
  color: #90949c;
  font-size: 11px;
  float: right;
  margin-left: 10px;
}

.comment-text {
  margin-bottom: 1.25rem;
  font-size: 14px;
  font-family: inherit;
  line-height: 20px;
}

/* You could style your text area how you would like here */

.active {
  margin-bottom: 1.25rem;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  line-height: 20px;
}

<div class="comment-block">
  <div class="bottom-comment">
    <div class="comment-author">Guestname</div>
    <div class="comment-date">Aug 24, 2014 at 23:35</div>
  </div>
  <p class="comment-text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit quasi sapiente
    modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?
  </p>
  <a href="#" onclick="edit()">Edit your message</a>
</div>

编辑：获取和设置高度可能对您很感兴趣。

一种方法：

let height = commentText.offsetHeight;
...
replacement.style.height = `${height}px`;

希望这会有所帮助