Javascript 使用聚合物获取标签值_Javascript_Html_Dom_Polymer

Javascript 使用聚合物获取标签值

javascript html dom polymer

Javascript 使用聚合物获取标签值,javascript,html,dom,polymer,Javascript,Html,Dom,Polymer,我正在尝试使用聚合物组件创建一个小型web，但我面临一个问题，我希望当我单击一个时，它的内容被困在输入上，但我不知道如何做到这一点最好的方法是什么警告：我自己也是聚合物初学者：）我不确定我是否100%正确地理解了你的问题。。。但让我们看看我制作了一个元素，它将标签上的内容复制到输入（我倾向于使用designer，因为它有助于处理所有布局内容）身体{ 字体系列：Roboto，'Helvetica Neue'，Helvetica，Arial，无衬线；保证金：0； } ：主持人{ 位置

我正在尝试使用聚合物组件创建一个小型web，但我面临一个问题，我希望当我单击一个

时，它的内容被困在输入上，但我不知道如何做到这一点

最好的方法是什么

警告：我自己也是聚合物初学者：）

我不确定我是否100%正确地理解了你的问题。。。但让我们看看

我制作了一个元素，它将标签上的内容复制到输入

（我倾向于使用designer，因为它有助于处理所有布局内容）


身体{
字体系列：Roboto，'Helvetica Neue'，Helvetica，Arial，无衬线；
保证金：0；
}
：主持人{
位置：绝对位置；
宽度：100%；
身高：100%；
框大小：边框框；
}
#磁芯卡{
位置：绝对位置；
宽度：300px；
边框左上半径：2px；
边框右上角半径：2px；
边框右下半径：2px；
边框左下半径：2px；
盒影：rgba（0,0,0,0.0980392）0px 2px 4px，rgba（0,0,0,0.0980392）0px 0px 3px；
左：130像素；
顶部：80px；
背景色：rgb（255、255、255）；
}
.core_输入{
填充：15px；
}
聚合物（“my-element”{
onTap：功能（事件、详细信息、发送方）{
var i=this.$.input；//通过输入元素的id获取输入元素
如果（sender.label='[clear]'）
i、 值=“”；
其他的
i、 值=sender.label；
},
});

<!doctype html>
<html>
<head>

  <script src="/components/platform/platform.js"></script>
  <style>
    body {
      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
    }
  </style>

    <link rel="import" href="/components/polymer/polymer.html">
    <link rel="import" href="/components/core-input/core-input.html">
    <link rel="import" href="/components/core-item/core-item.html">
    <link rel="import" href="/components/core-icons/core-icons.html">

  <script>
  </script>

</head>

<body fullbleed unresolved>

<my-element>
</my-element>

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_card {
        position: absolute;
        width: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 130px;
        top: 80px;
        background-color: rgb(255, 255, 255);
      }
      .core_input {
        padding: 15px;
      }
    </style>
    <core-card id="core_card" layout vertical>
      <core-input id="input" placeholder="Type something..." class="core_input"></core-input>
      <core-item on-tap="{{onTap}}" label="Click me!!" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
      <core-item on-tap="{{onTap}}" label="Or Me ?" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
      <core-item on-tap="{{onTap}}" label="[clear]" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
    </core-card>
  </template>

  <script>
    Polymer('my-element', {
      onTap: function(event,detail,sender) {
        var i = this.$.input;           // get hold of the input element via its id 
        if(sender.label == '[clear]')
            i.value = '';
            else        
            i.value = sender.label;
      },
    });
  </script>
</polymer-element>

</body>

</html>