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

仅当用户输入第一个字符时，纸张输入会浮动其标签。只要用户点击标签，是否可以浮动标签？例如，请参阅https://unacademy.in/登录屏幕输入字段。纸张输入 - 单击输入字段时的浮动标签

2016-02-27 RAGHU RAMAN

您可以使用always-float-label,no-label-floatpaper-input的属性/属性在on-click事件中实现此目的。 paper-inputdemo显示如何使用always-float-label,no-label-float属性/属性。

的演示可以

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

来源

2016-02-28 08:10:58

是的，我已经知道always-float-label和no-label-float属性。我希望标签在点击事件上浮动，并在外部点击时恢复。 –

你没有在你的问题中提到它，你知道它，无论如何，我已经更新了答案 –

一个 '好' 的办法：

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

要解释一下，这是一个纯粹的数据绑定解决方案。 focused设置只读布尔值，并且always-float-label采用布尔值。只需绑定这些值，以便always-float-label与focused同步（其中always-float-label只读取使用[[]]设置的值）。

来源

2016-10-09 17:59:20 willsquire

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

回答

相关问题