javascript - contenteditable 的用途是什么？我可以将其用作编辑个人资料按钮吗

Question

html5 中 contenteditable 的用法是什么？如何在 mongoose/MongoDB 中保存 contenteditable div 中的更改并向用户显示这些更新的详细信息？

<h2>Edit your profile username:</h2>

<div id="text" contenteditable="true">
   bisc452
</div>

<button>Save Changes</button>

我希望它可以在没有 javascript 的情况下完成，因此当用户禁用 javascript 时，他可以保存更改，但如果需要使用 javascript 或 jquery 也很好

Answer 1

如果您只向用户询问纯文本(例如个人资料用户名)，则不需要 contenteditable。您只需使用 <input >为此标记。

HTML -

<form >
    Edit your profile username: 
    <input type="text" name="username" id="profileUsername" value="username">
</form>
<button onclick="myFunction(document.getElementById('profileUsername').value)">Save Changes</button>

javascript -

function myFunction(profileUserName) {
  console.log("Profile username : "+ profileUserName);
  // Save this value in MongoDB here
}

Contenteditable 通常用于像 StackOverflow 所使用的编辑器来编写问题和答案，其中用户输入的不仅是文本，而且是具有某种格式的文本。如果您出于任何原因想使用 contenteditable，那么 -

<h2>Edit your profile username:</h2>

<div id="myText" contenteditable="true">
   bisc452
</div>

<button onclick="myFunction(document.getElementById('myText').innerHTML)">Save Changes</button

javascript -

function myFunction(profileUserName) {
  console.log("Profile username : "+ profileUserName);
  // Save this value in MongoDB here
}