时间戳

首页 > 解决方案 > contenteditable 的用途是什么，我可以将它用作编辑配置文件按钮吗

javascript - contenteditable 的用途是什么，我可以将它用作编辑配置文件按钮吗

问题描述

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 也很好

标签： javascripthtmlnode.jsmongodbmongoose

解决方案

如果您只询问用户的纯文本，例如个人资料用户名，则不需要 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
}

推荐阅读