javascript - 如何在不使用 jquery 的情况下初始化具有字符数的物化文本区域?

标签 javascript jquery html materialize

我不能仅使用 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/

相关文章:

javascript - 无法在 Angular 中将 json 文件调用到工厂中

javascript - 如何在单个流体 <ul> 中每行始终具有相同数量的固定宽度 <li>?

html - Flexbox:使用 Flexbox 将页眉和页脚移动到侧边栏

javascript - CSS 设置特定区域的最大图像大小

javascript - 如何将不同的名称放入自动生成的文本框中,以便我可以使用复选框将文本放入其中

javascript - IE 中的占位符

javascript - Vue.js - 需要在不重新加载的情况下切换方向(rtl 到 ltr,反之亦然)

php - 同时在DB中保存3张图像

javascript - 如何让div在滚动时隐藏在固定div后面

javascript - 在显示大部分使用组件时设置 React 基本背景颜色