Question

我想知道是否有办法显示在iron-autogrow-textarea中输入的标志数量？如果是，我该怎么做？

我试过这个解决方案。

Javascript功能：

countChars: function (countFrom, displayTo) {
      var len = document.getElementById(countFrom).value.length;
      document.getElementById(displayTo).innerHTML.len;
    }

聚合物成分：

<iron-autogrow-textarea id="textarea"
                            placeholder="Enter description ..." rows="1" max-rows="4"
                            maxlength="500"
                            onkeyup="countChars('textarea','charcount');"
                            onkeydown="countChars('textarea','charcount');"
                            onmouseout="countChars('textarea','charcount');">
    </iron-autogrow-textarea>
<span id="charcount">0</span>/500

我做错了什么或者我该怎么做才能使它有效？

Answer 1

错误：

您的Javascript没有写任何内容。最后一行是：

document.getElementById(displayTo).innerHTML.len;

当你可能意味着：

document.getElementById(displayTo).innerHTML = len;
您没有使用Polymer事件绑定的正确语法。要将事件处理程序绑定到Polymer元素，请使用on-{eventname}="handlerName"。对于keyup，您可以使用on-keyup（不是onkeyup）。与onkeyup值不同，on-keyup的值不能是任意Javascript代码。相反，它必须是Polymer元素中定义的函数的名称。

无效性：

当您可以使用Polymer automatic node finding代替document.getElementById('foo')时，您使用Polymer.$.foo查询文档。
您正在尝试绑定keyup和keydown，这会导致您的处理程序在每次按键时都被调用两次。 mouseout绑定似乎也是不必要的。

工作示例：

jsbin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- Polymer Imports -->
    <base href="https://polygit.org/polymer+:master/components/">
    <link href="polymer/polymer.html" rel="import">
    <script type="text/JavaScript" src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="iron-autogrow-textarea/iron-autogrow-textarea.html">   
</head>

<body>
  <my-input></my-input>

  
  <dom-module id="my-input">
    <template>
      <iron-autogrow-textarea id="textarea"
                              placeholder="Enter description ..." rows="1" max-rows="4"
                              maxlength="500"
                              on-keyup="_countChars"
      ></iron-autogrow-textarea>
      <span id="charcount">0</span>/500
    </template>
    <script>
      Polymer({
        is: 'my-input',

        _countChars: function() {
          this.$.charcount.textContent = this.$.textarea.value.length;
        }
      });
    </script>
  </dom-module>
</body>

</html>

请尝试`paper-textarea`：

您可能会发现<paper-textarea>很有用，因为它已经实现了character counter：

jsbin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- Polymer Imports -->
    <base href="https://polygit.org/polymer+:master/components/">
    <link href="polymer/polymer.html" rel="import">
    <script type="text/JavaScript" src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="paper-input/paper-textarea.html">
</head>

<body>
  <paper-textarea placeholder="Enter description ..."
               maxlength="500"
               max-rows="4"
               char-counter              
  ></paper-textarea>
</body>

</html>

聚合物iron-autogrow-textarea显示标志计数

1 个答案:

错误：

无效性：

工作示例：

请尝试`paper-textarea`：

聚合物iron-autogrow-textarea显示标志计数

1 个答案:

错误：

无效性：

工作示例：

请尝试paper-textarea：

请尝试`paper-textarea`：