Skip to content

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 = "" > < /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);

<!-- CSS --><link href="" rel="stylesheet"><!-- Compiled and minified CSS --><link rel="stylesheet" href="">
<!DOCTYPE html>
<html lang="en">

  <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>


    <div class="row">
      <form class="col s12 m6">
        <div class="row">
          <div class="input-field col s12">
            <textarea id="description" class="materialize-textarea" data-length="50"></textarea>
            <label for="description">描述</label>
          <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>





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);


2 People found this is helpful