Jquery 每个 textareas/textboxes 的字符数

Question

我正在尝试计算页面上每个文本区域中的字符数。我决定使用下面的代码（，但我正在努力让它工作。

 $(function(){
 $('textarea').on('keyup', function(){
  var wordsLength = $(this).val().length;
  $(this).next().find('').html(wordsLength);
  });
 });

下面是我的 html 和 css。我无法直接编辑 CSS 或 Html，只能使用 jquery 脚本。我不确定我错过了什么。任何帮助将不胜感激：

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  border-spacing: 2px;
  border-color: grey;
}

input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
  border: 1px solid #b9b9b9;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.90);
  color: #444444;
}

textarea {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark-color(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textarea;
  background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
  -webkit-rtl-ordering: logical;
  flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
  border-image: initial;
  padding: 2px;
}

<table width="100%" role="presentation">
  <tbody>
    <tr>
      <td style="width:100%;"><textarea style="display:none;" origvalue="<p>I can't speak</p><p>This is a great improvement</p><p><br/>&amp;#160;</p>" spellcheck="true" maxlength="225">&lt;p&gt;I can't speak&lt;/p&gt;&lt;p&gt;This is a great improvement&lt;/p&gt;&lt;p&gt;&lt;br&gt;&amp;nbsp;&lt;/p&gt;</textarea>
        <div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
          <p>I can't spek</p>
          <p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
          <p><br>&nbsp;</p>
        </div>
      </td>
    </tr>

  </tbody>
</table>

Answer 1

主要问题是因为您已将事件处理程序附加到 textarea，但正在输入的可见元素是可内容编辑的 div。因此，您需要更正您的选择器。由于此元素是 div，您需要使用 text() 或 html() 来读取其内容，而不是 val()。为此使用 input 事件也更有意义。

其次，您需要修复以元素为目标的选择器以显示字符数。

$(function() {
  $('div[contenteditable="true"]').on('input', function() {
    var wordsLength = $(this).text().length;
    $(this).siblings('.count').html(wordsLength);
  }).trigger('input');
});

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  border-spacing: 2px;
  border-color: grey;
}

input[type=password],
input[type=text],
input[type=file],
input:not([type]),
select,
textarea,
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled,
.sp-peoplepicker-autoFillContainer,
.ms-inputBox {
  border: 1px solid #b9b9b9;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.90);
  color: #444444;
}

textarea {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark-color(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textarea;
  background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
  -webkit-rtl-ordering: logical;
  flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
  border-image: initial;
  padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="100%" role="presentation">
  <tbody>
    <tr>
      <td style="width:100%;"><textarea style="display:none;" origvalue="<p>I can't speak</p><p>This is a great improvement</p><p><br/>&amp;#160;</p>" spellcheck="true" maxlength="225">&lt;p&gt;I cannt spek&lt;/p&gt;&lt;p&gt;This is a great improvement&lt;/p&gt;&lt;p&gt;&lt;br&gt;&amp;nbsp;&lt;/p&gt;</textarea>
        <div class="ms-rtestate-field ms-rtefield ms-inputBox ms-rtestate-write ms-inputBoxActive" style="min-height:84px;width:75%;" disabled="disabled" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" spellcheck="true" rtedirty="false">
          <p>I cannt spek</p>
          <p>This is <span id="ms-rterangecursor-start" rtenodeid="1"></span><span id="ms-rterangecursor-end"></span>a great immmprovemet</p>
          <p><br>&nbsp;</p>
        </div>
        <span class="count"></span>
      </td>
    </tr>
  </tbody>
</table>

Jquery 每个 textareas/textboxes 的字符数

Jquery character count for each of many textareas/textboxes

javascript

python

sharepoint

jquery

word-count