Question

仅当用户键入第一个字符时，

paper-input才会浮动其标签。用户点击标签后是否可以浮动标签？例如，请参阅https://unacademy.in/登录屏幕输入字段。

Answer 1

您可以使用paper-input的{{3}}，always-float-label属性/属性在on-click事件中实现此目的。 paper-input no-label-float显示了如何使用always-float-label，no-label-float属性/属性。

演示可能是

＆＃13;

<!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>

＆＃13;

Answer 2

'更好'的方式：

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

为了解释，这是一个纯数据绑定解决方案。 focused设置只读布尔值，always-float-label设置布尔值。只需绑定值即可always-float-label与focused同步（其中always-float-label仅使用[[ ]]读取值集。

单击输入字段时的纸张输入 - 浮动标签

2 个答案: