Question

我处境混乱。我有这样的div

<div class="editable" id="{{ $company->id }}" data-attribute="description">
                    {{ $company->description }}
</div>

我实际上正在使用jinplace inediting，它需要一个div来设置如上所述。我正在寻找一种方法来使用字符数，这只适用于input类型元素

我尝试像这样设置

 <div class="editable" id="{{ $company->id }}" data-attribute="description">
  <input type="text" data-length="500" value="{{ $company->description }}"
    </div>

显示此div的字符数，但提交时不更新。

我有什么想法可以设置它吗？

Answer 1

jinplace doest对其使用的数据使用标准格式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" />

Answer 2

您可能想要查看contenteditable div。

以下是使用Vanilla JS计算角色长度的方法。

var toCount     = document.getElementById('toCount'),
    charCount   = document.getElementById('charCount');
    
updateCount(toCount);

function updateCount(el) {
  charCount.innerHTML = el.innerHTML.length;
}

<div contenteditable="true" id="toCount" oninput="updateCount(this)">This is an editable paragraph.</div>
<span id="charCount"></span> words

将div放在输入字段中

2 个答案: