Making a div's text editable (by the user)-CodePudding

Hi I'm building a menu of tabs that need to have some text.

When clicking on the button, a new tab is added to the tabs bar.

I want that once a new empty tab is added, its text will be editable (i.e. the user will be able to write some text, and it will be saved on the tab when typing enter).

This is what I've already done:

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  contenteditable="true"></div>
      <div id=attBtn_wrapper>
        <i  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>

I've also created a fiddle: https://jsfiddle.net/89pm4ba0/1/

CodePudding user response：

I have tweaked/simplified your code. Is this what you're looking for?

Instead of using contenteditable="true" on the tab div I added a text input element.

You can use JavaScript to get the value of the input at any point and do whatever you want with it.

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 >
        <input type="text" value="Title">
      </div>
      
      <div id=new-tab>
        <i  aria-hidden="true"></i>
      </div>
    </div>
    
  </div>
</body>

</html>

CodePudding user response：

Add tab.setAttribute("contenteditable", "true").

contenteditable does exactly what you think it does, makes the content editable.

An alternative approach, though more difficult would be to create a text input element and add that to the tab.

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);
}