我想知道是否有办法显示在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
我做错了什么或者我该怎么做才能使它有效？
答案 0 :(得分：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绑定似乎也是不必要的。
<!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：
<!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>