paper-input - 单击输入字段时浮动标签

Question

paper-input 只有在用户输入第一个字符时才会浮动其标签。是否可以在用户点击后立即浮动标签？例如，参考 https://unacademy.in/ 登录屏幕输入字段。

Answer 1

您可以使用 always-float-label, no-label-float properties/attributes of paper-input In an on-click event to achieve this. paper-input demo 显示如何使用 always-float-label, no-label-float properties/attributes.

演示可以是

<!DOCTYPE html>
<html>

<head>

    <title>Label float</title>

    <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/">
  <link rel="import" href="paper-input/paper-input.html">
    

</head>

<body>

<my-form></my-form>  
  <dom-module id="my-form">  
   <template> 
  
     <paper-input name="name" id="name" label="name" on-click="_click" on-blur="_blur"></paper-input>
  
    </template> 
    <script type="text/javascript">
      Polymer({
        is:"my-form",
        _click:function (){
          //console.log(this.$.name.value);
          this.$.name.alwaysFloatLabel=true;
        },
        _blur:function(){
         this.$.name.alwaysFloatLabel=false;
       }
      })
    
    </script>
</dom-module>
</body>

</html>

Answer 2

一个'better'方式：

<paper-input label="Name" focused="{{focused}}" always-float-label="[[focused]]"></paper-input>

说明一下，这是一个纯数据绑定方案。 focused 设置一个只读布尔值，always-float-label 接受一个布尔值。只需绑定值，使 always-float-label 与 focused 同步（其中 always-float-label 仅读取使用 [[ ]] 设置的值）。

paper-input - 单击输入字段时浮动标签

paper-input - float label on clicking the input field

material-design

polymer-1.0

paper-elements