实现（框架）字符数

Question

我无法弄清楚为什么字符数显示为“1/101/10”。

Codepen：http://codepen.io/anon/pen/avdbLG

看起来“/ 101 /”是最大限制（10）和当前计数（1）的组合。当您在字段中键入时，“/ 101 /”会随着键入的字符数量而增加。

HTML：

<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input id="input_text" type="text" length="10">
        <label for="input_text">Input text</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="textarea1" class="materialize-textarea" length="120"></textarea>
        <label for="textarea1">Textarea</label>
      </div>
    </div>
  </form>
</div>

JS：

$(document).ready(function() {
  $('input#input_text, textarea#textarea1').characterCounter();
});

Answer 1

请删除初始化代码。

$('input#input_text, textarea#textarea1').characterCounter();

它工作正常。

Answer 2

这是因为由于某种原因创建了两个字符数的跨度。这是HTML中输出的样子：

<div class="input-field col s6">
    <input id="input_text" type="text" length="10">
    <label for="input_text" class="active">Input text</label>
    <span class="character-counter" style="float: right; font-size: 12px; height: 1px;"></span>
    <span class="character-counter" style="float: right; font-size: 12px; height: 1px;"></span>
</div>

它似乎some one else has had this problem，但那里没有提供解决方案。

Answer 3

首先请确保你写的数据长度不仅仅是我知道你必须在动态添加时必须初始化的长度，所以你甚至不需要js部分

更多阅读>> materializecss.com -> forms

Answer 4

这里没有回答对我有用。

这就是我的工作方式：

document.addEventListener('DOMContentLoaded', function () {
            var textNeedCount = document.querySelectorAll('#input_text, #textarea1');
            M.CharacterCounter.init(textNeedCount);
});

Answer 5

您需要使用旧版本的materialize 0.97.3并且您可以使用最新的jquery。这对我来说很好

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"</script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>

并将以下内容放在js文件中：

$(document).ready(function() {

    $('input#input_text, textarea#textarea1').characterCounter();
});