获取Polymer中文本字段的值

时间：2015-01-08 00:31:54

标签： javascript polymer material-design

我有一个简单的纸张输入，我正试图从中获取价值，但由于某种原因，我没有任何运气。这是HTML的简化版本，我在其中设置了按钮和onclick事件：

  <paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
        <core-header-panel flex id="annotation-box">
            <core-toolbar class="graph-sets-header">
              <span flex>TEST</span>
            </core-toolbar>
            <br>
            <paper-input-decorator label="Add your annotation">
                <paper-autogrow-textarea>
                    <textarea id="annotationSource"></textarea>
                </paper-autogrow-textarea>
            </paper-input-decorator>
            <paper-button dismissive hover >Cancel</paper-button>
            <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
        </core-header-panel>
    </paper-action-dialog>

这是我的JS功能：

function getAnnotation(){

    var toolText = document.getElementById('annotationSource').value;
        console.log(toolText);

}

这是一个大部分都在运行的plunker（除了我无法获得在控制台中显示的纸张输入的值：http://plnkr.co/edit/1PAi13ISgP7mNXDMNStF?p=preview

我确信这可以使它成为一个聚合物模板，但是我需要将值传递给主HTML中的一堆其他函数，并且我一直存在将数据移入和移出模板的问题所以我想要如果可以的话，避免这样做。

添加更多流量以使其更清晰* 要打开注释框，您需要单击图形中的任何一个点 - 这样做会打开纸张输入框，我想用它来创建注释...最后添加注释文本到通过在我生成的点上执行鼠标来显示的工具提示

2 个答案:

答案 0 :(得分：2)

使用＆＃39;自动绑定＆＃39;它更容易访问annotationSource元素

＆＃13;
＆＃13; 
var chart = c3.generate({
    bindto: '#graph',
    padding: {
      top: 30
    },
    data: {
      xs: {
        'data1': 'x1',
        'data2': 'x2',
      },
      columns: [
        ['x1', 1, 3, 4, 5, 7, 10],
        ['x2', 3, 5, 7, 10, 12],
        ['data1', 2, 3, 6, 7.5, 8, 9.5],
        ['data2', 2, 4, 4.5, 10, 11]
      ],

      onclick: function(d, i) {
        console.log("onclick", d, i);
        console.log(i.getAttribute('cx'));
        var setCX = Number(i.getAttribute('cx'));

        document.getElementById("someTemplate").$.addAnnotation.toggle()

        var svg = d3.select("svg");

        var circle = svg.append("circle")
          .attr("cy", 10)
          .attr("cx", (setCX + 40))
          .attr("r", 5);

      }
    }
  });

  function getAnnotation() {

    var annotationSource = document.getElementById("someTemplate").$.annotationSource;
    var toolText = annotationSource.value;

    console.log(toolText);

  }
＆＃13; 
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>

<template id="someTemplate" is="auto-binding">

  <paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
    <core-header-panel flex id="annotation-box">
      <core-toolbar class="graph-sets-header">
        <span flex>TEST</span>
      </core-toolbar>
      <br>
      <paper-input-decorator label="Add your annotation">
        <paper-autogrow-textarea>
          <textarea id="annotationSource"></textarea>
        </paper-autogrow-textarea>
      </paper-input-decorator>
      <paper-button dismissive hover>Cancel</paper-button>
      <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
    </core-header-panel>
  </paper-action-dialog>

</template>

<div id="graph">
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

确定没有使用模板我已经使用window.event来获取被点击的纸质按钮元素，然后从那里抓取注释框元素然后使用querySelector来获取annotationSource元素。可能有更好的方法，但它有效

var chart = c3.generate({
   bindto: '#graph',
   padding: {
     top: 30
   },
   data: {
     xs: {
       'data1': 'x1',
       'data2': 'x2',
     },
     columns: [
       ['x1', 1, 3, 4, 5, 7, 10],
       ['x2', 3, 5, 7, 10, 12],
       ['data1', 2, 3, 6, 7.5, 8, 9.5],
       ['data2', 2, 4, 4.5, 10, 11]
     ],

     onclick: function(d, i) {
       console.log("onclick", d, i);
       console.log(i.getAttribute('cx'));
       var setCX = Number(i.getAttribute('cx'));
       document.querySelector('#addAnnotation').toggle()

       var svg = d3.select("svg");

       var circle = svg.append("circle")
         .attr("cy", 10)
         .attr("cx", (setCX + 40))
         .attr("r", 5);

     }
   }
 });

 function getAnnotation() {

   var paperBtnElement = window.event.toElement || window.event.relatedTarget || window.event.target;
   var toolText = paperBtnElement.parentElement.querySelector("#annotationSource").value;
   console.log(toolText);

 }
div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  font: 10px sans-serif;
  background: #ddd;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">

<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>

<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
  <core-header-panel flex id="annotation-box">
    <core-toolbar class="graph-sets-header">
      <span flex>TEST</span>
    </core-toolbar>
    <br>
    <paper-input-decorator label="Add your annotation">
      <paper-autogrow-textarea>
        <textarea id="annotationSource"></textarea>
      </paper-autogrow-textarea>
    </paper-input-decorator>
    <paper-button dismissive hover>Cancel</paper-button>
    <paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
  </core-header-panel>
</paper-action-dialog>

<div id="graph">
</div>

相关问题
最新问题