How to init a materialize textarea with character count without using jquery?

I can’t use HTML only to show the Character Counter from MaterializeCSS. The website example is implemented in jQuery. I can’t use jQuery in my React project so I wonder if there’s a way to init a MaterializeCSS textarea with character count just by using materializeCSS’s JS? There is a workable date-picker in materializeCSS’s JS below as a example, Thanks a lot!

Character Counter from MaterializeCSS website

< script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js" > < /script> <
script >
  const datePicker = document.querySelector('.datepicker');
const datePickerInstance = M.Datepicker.init(datePicker);

//TODO:How to modify these two statements below to make textarea character counter workable by using materializecss' js, just like the "date-pick" one above? Cause materializecss says it doesn't require jQuery as a dependency.

const textNeedCount = document.querySelector('textarea #description');
const textNeedCountInstance = M.CharacterCounter(textNeedCount);

<
/script>

<!-- CSS --><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><!-- Compiled and minified CSS --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Parallax Template - Materialize</title>
</head>

<body>
  <header>
  </header>

  <main>
    <div class="row">
      <br>
      <form class="col s12 m6">
        <!--description-->
        <div class="row">
          <div class="input-field col s12">
            <textarea id="description" class="materialize-textarea" data-length="50"></textarea>
            <label for="description">描述</label>
          </div>
          <div class="input-field col s12 colorDataPicker">
            <i class="material-icons prefix">textsms</i>
            <input type="text" class="datepicker" id="date-pick">
            <label for="date-pick">生日</label>
          </div>
        </div>
      </form>

    </div>
  </main>
</body>

</html>

Answer

const textNeedCountInstance = M.CharacterCounter(textNeedCount);

The error you are getting is TypeError: Cannot call a class as a function. This means that this is a class and it needs to be instantiated with the keyword new.

const textNeedCountInstance = new M.CharacterCounter(textNeedCount);

DEMO: https://jsfiddle.net/wwukaaab/

Advertisement

Answer