聚合物纸输入装饰器 updateLabelVisibility() 不工作
Polymer paper-input-decorator updateLabelVisibility() is not working
我不知道如何在 paper-input-decorator 元素上使用 updateLabelVisiblity() 函数。这应该有效,但无效!
在我的 plunker 中,正常的 inputs 值 连接到 paper-inputs 值。每当我在正常输入中键入内容时,都会调用一个函数。该函数调用 validate() 和 updateLabelVisiblity.
Here is a plunker 这是我的聚合物元素。
<polymer-element name='my-input'>
<template>
<h3>Paper input (linked)</h3>
<paper-input-decorator id='myPaperInput' label='Field' error='error' floatingLabel autovalidate>
<input is='core-input' pattern='^[0-9]*$' value='{{something}}'>
</paper-input-decorator>
<h3>Normal input (linked)</h3>
<input value='{{something}}' on-keyup='{{mykeyup}}'>
<p>
Why doesn't the label show above the paper-input when i start typing in the <b>Normal Input</b>?
</p>
</template>
<script>
Polymer({
mykeyup: function(){
this.$.myPaperInput.validate();
this.$.myPaperInput.updateLabelVisibility();
}
});
</script>
</polymer-element>
已解决
mykeyup: function(){
var p = this.$.myPaperInput;
p.validate();
p._autoLabelVisible = p.querySelector('input').value !== '' ? false : true;
}
我明白发生了什么。 updateLabelVisibility 需要该值才能显示浮动标签。但是,您也可以使用 updateLabelVisibility 来代替:
this.$.myPaperInput._autoLabelVisible = false;
这基本上只是硬设置 updateLabelVisibility 正在设置的值。
这是您的代码,刚刚更新:
http://plnkr.co/edit/l4xQBv7PKft2zqARnPu1?p=preview
参考:
https://github.com/Polymer/paper-input/blob/master/paper-input-decorator.html#L474
我不知道如何在 paper-input-decorator 元素上使用 updateLabelVisiblity() 函数。这应该有效,但无效!
在我的 plunker 中,正常的 inputs 值 连接到 paper-inputs 值。每当我在正常输入中键入内容时,都会调用一个函数。该函数调用 validate() 和 updateLabelVisiblity.
Here is a plunker 这是我的聚合物元素。
<polymer-element name='my-input'>
<template>
<h3>Paper input (linked)</h3>
<paper-input-decorator id='myPaperInput' label='Field' error='error' floatingLabel autovalidate>
<input is='core-input' pattern='^[0-9]*$' value='{{something}}'>
</paper-input-decorator>
<h3>Normal input (linked)</h3>
<input value='{{something}}' on-keyup='{{mykeyup}}'>
<p>
Why doesn't the label show above the paper-input when i start typing in the <b>Normal Input</b>?
</p>
</template>
<script>
Polymer({
mykeyup: function(){
this.$.myPaperInput.validate();
this.$.myPaperInput.updateLabelVisibility();
}
});
</script>
</polymer-element>
已解决
mykeyup: function(){
var p = this.$.myPaperInput;
p.validate();
p._autoLabelVisible = p.querySelector('input').value !== '' ? false : true;
}
我明白发生了什么。 updateLabelVisibility 需要该值才能显示浮动标签。但是,您也可以使用 updateLabelVisibility 来代替:
this.$.myPaperInput._autoLabelVisible = false;
这基本上只是硬设置 updateLabelVisibility 正在设置的值。
这是您的代码,刚刚更新:
http://plnkr.co/edit/l4xQBv7PKft2zqARnPu1?p=preview
参考: https://github.com/Polymer/paper-input/blob/master/paper-input-decorator.html#L474