如何使div充当输入

Question

我设置了一个复选框，将显示一个进度条，并按百分比显示其当前进度。如何使div标签用作将值保存到数据库的输入

我尝试在div上使用它并显示百分比，但是当我使用输入尝试时它无法显示百分比

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
  <input type="" name="" id="percentage">

$(document).ready(function() {
  // get box count
  var count = 0;
  var checked = 0;

  function countBoxes() {
    count = $("input[type='checkbox']").length;
    console.log(count);
  }

  countBoxes();
  $(":checkbox").click(countBoxes);

  // count checks

  function countChecked() {
    checked = $("input:checked").length;

    var percentage = parseInt(((checked / count) * 100), 10);
    $(".progressbar-bar").progressbar({
      value: percentage
    });
    $(".progressbar-label").text(percentage + "%");
    $('#percentage').text(percentage + "%")
  }

  countChecked();
  $(":checkbox").click(countChecked);

Answer 1

您可以使用contenteditable属性，然后通过innerHTML获取该值。