javascript - 在输入字段中放置一个 div

Question

<分区>

Answer 1

jinplace 确实使用标准格式的数据，它使用 AJAX 参见 here它也不使用数据长度属性，请参阅 here .

相反，我会使用一些 jQuery，因为您已经在您的元素中使用了它，因为 jinplace 是一个 jQuery 插件。

使用标准contentEditable您可以简单地将任何元素变成可编辑的属性。

然后我会使用计数器来更新隐藏字段，以便您可以以标准方式将数据发布到服务器。

$(function () {
  countDiv("#companyId");
});

function countDiv(sender) {
  var html = $(sender).html();
  var count = html.length;
  var maxCount = $(sender).data("count");
  
  if (count > maxCount) {
    html = html.substring(0, maxCount);
    $("#companyId").html(html);
    count = maxCount;
  }
  
  $("#companyIdCount").text(count);
  $("#hfCompanyId").text(html);
}

function test() {
  console.log($("#hfCompanyId").html());
}

#companyId {
  min-height: 100px;
  border: solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="hidden" id="hfCompanyId" name="hfCompanyId" />

<div contentEditable id="companyId" oninput="countDiv(this);" data-count="500">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a mollis magna. Sed quis iaculis nisl. Integer eget leo pulvinar, scelerisque ante nec, euismod lorem.
</div>

<br />

Count: <span id="companyIdCount"></span>

<br /><br />

<input type="submit" onclick="test();" value="Test" />