我不能仅使用 HTML 来显示 MaterializeCSS 中的字符计数器。该网站示例是用 jQuery 实现的。我无法在我的 React 项目中使用 jQuery,所以我想知道是否有一种方法可以仅通过使用 MaterializeCSS 的 JS 来初始化具有字符计数的 MaterializeCSS 文本区域?下面以materializeCSS的JS中有一个可行的日期选择器为例,非常感谢!
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>
最佳答案
每https://github.com/Dogfalo/materialize/issues/5730
您应该像这样初始化字符计数器:
var elems = document.querySelectorAll('.has-character-counter');
M.CharacterCounter.init(elems);
关于javascript - 如何在不使用 jquery 的情况下初始化具有字符数的物化文本区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49743933/