javascript - 如何使用 jquery 添加带有可编辑标题的按钮？

Question

我有一个简单的部分，用户可以在其中添加多个单击按钮，我希望这些按钮名称是可编辑的，这意味着用户可以根据需要编辑和保存按钮标题。

这是使用单击添加按钮时的 UI 外观

我希望用户能够通过将鼠标放在输入按钮名称上来添加按钮标题。

当用户将鼠标放在输入按钮名称上时，将出现一个简单的弹出文本区域，如下所示。

$(document).ready(function() {

  $('#btn').on('click', function() {
    var buttonWithText = $("<div class='clickarea'>Enter button name</div>")
    $(".main-container").append(buttonWithText);
  })

})

.main-container {
  height: 300px;
  width: 400px;
  background: red;
}

.clickarea {
  height: 60px;
  width: 50%;
  /* margin: 20px; */
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80px auto;
}

#btn {
  cursor: pointer;
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">

</div>
<button id="btn">Add button</button>

Answer 1

对于一个非常简单的解决方案，您可以使用prompt:

$(document).ready(function() {

  $('#btn').on('click', function() {
    let text = prompt('enter button text:');
    var buttonWithText = $("<div class='clickarea'>"+text+"</div>")
    $(".main-container").append(buttonWithText);
  })

})

.main-container {
  height: 300px;
  width: 400px;
  background: red;
}

.clickarea {
  height: 60px;
  width: 50%;
  /* margin: 20px; */
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80px auto;
}

#btn {
  cursor: pointer;
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">

</div>
<button id="btn">Add button</button>