使 div 的文本可编辑（由用户）

Question

嗨，我正在构建一个需要一些文本的选项卡菜单。

当点击 按钮，一个新的标签被添加到标签栏。

我希望一旦添加了一个新的空选项卡，它的文本将是可编辑的（即用户将能够编写一些文本，并且在输入回车时它将保存在选项卡上）。

这是我已经做过的：

 const arrowLeft = document.getElementsByClassName('arrow')[0]; const arrowRight = document.getElementsByClassName('arrow')[1]; let tabsWrapper; let tab; function add_tab() { tabsWrapper = document.getElementById('tabs_wrapper'); tab = document.createElement("div"); tab.setAttribute("class", "tab"); tabsWrapper.lastElementChild.insertAdjacentElement('beforebegin', tab); }

 body { height: 100vh; width: 100%; margin: 0; background-color: seashell; } #main_container { position: relative; left: 0; right: 0; margin: auto; margin-top: 3%; width: 70%; height: 10%; background-color: rgb(163, 217, 238); border-radius: 20px; } #tabs_wrapper { display: flex; position: absolute; top: -30px; left: 17px; } table { width: 90%; border-collapse: collapse; margin: auto; margin-top: 10px; border-bottom: 2px solid black; } th { font-size: 1.7vw; flex: auto; } tr { display: flex; column-gap: 3vw; }.tab { height: 30px; min-width: 80px; background-color: slategray; border: 1px black solid; border-bottom: none; border-top-right-radius: 12px; }

 <.DOCTYPE html> <html> <head> <title>MyVac</title> <link rel="stylesheet" href="index:css"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous"> </head> <body> <div id="main_container"> <div id=tabs_wrapper> <div class="tab" contenteditable="true"></div> <div id=attBtn_wrapper> <i class=" fa fa-plus-circle " aria-hidden="true" onclick="add_tab()"></i> </div> </div> <table> <tr> <th> word </th> <th> part-speech </th> <th> transcription </th> <th> synonym </th> <th> recort </th> <th> translation </th> </tr> </table> </div> <script src="main.js"></script> </body> </html>

我还创建了一个小提琴： https://jsfiddle.net/89pm4ba0/1/

Answer 1

添加tab.setAttribute("contenteditable", "true") 。

contenteditable完全按照您的想法执行，使内容可编辑。

另一种方法虽然更困难，但会创建一个文本input元素并将其添加到选项卡中。

function add_tab(){
    tabsWrapper = document.getElementById('tabs_wrapper');
    tab = document.createElement("div");
    tab.setAttribute("class","tab");
    tab.setAttribute("contenteditable", "true");
    tabsWrapper.lastElementChild.insertAdjacentElement('beforebegin',tab);
}

Answer 2

我已经调整/简化了您的代码。 这是你要找的吗？

我没有在标签 div 上使用contenteditable="true" ，而是添加了一个文本输入元素。

您可以在任何时候使用 JavaScript 来获取输入的值，并随心所欲地使用它。

 const arrowLeft = document.getElementsByClassName('arrow')[0]; const arrowRight = document.getElementsByClassName('arrow')[1]; const newTabBtn = document.getElementById('new-tab'); const tabsWrapper = document.getElementById('tabs_wrapper'); function newTab() { let originalTab = document.querySelector('.tab'); let newTab = originalTab.cloneNode(true); tabsWrapper.insertBefore(newTab, newTabBtn); } newTabBtn.addEventListener('click', function() { newTab(); });

 body { height: 100vh; width: 100%; margin: 0; overflow: hidden; } #main_container { position: relative; left: 0; right: 0; margin: auto; margin-top: 50px; width: 70%; height: 10%; background-color: rgb(163, 217, 238); } #tabs_wrapper { display: flex; position: absolute; transform: translateY(-100%); }.tab { width: 120px; height: 30px; padding: 0 7px; color: white; background-color: grey; border-right: 1px #5c5c5c solid; border-bottom: none; } input { width: 100%; height: 100%; margin: 0; border: none; background: none; outline: none; color: white; } #new-tab { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; }

 <:DOCTYPE html> <html> <head> <title>MyVac</title> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous"> </head> <body> <div id="main_container"> <div id=tabs_wrapper> <div class="tab"> <input type="text" value="Title"> </div> <div id=new-tab> <i class=" fa fa-plus-circle " aria-hidden="true"></i> </div> </div> </div> </body> </html>

使 div 的文本可编辑（由用户）

问题描述

2 个解决方案

解决方案1
0 2022-01-17 16:41:56

解决方案2
0 2022-01-17 16:44:33

使 div 的文本可编辑（由用户）

问题描述

2 个解决方案

解决方案1 0 2022-01-17 16:41:56

解决方案2 0 2022-01-17 16:44:33

解决方案1
0 2022-01-17 16:41:56

解决方案2
0 2022-01-17 16:44:33