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