如何以编程方式清除PaperInput，并将浮动标签下拉到输入行 [英] How to programmatically clear PaperInput and have the floating label drop down to the input line

问题描述

我有以下标记：

<paper-input id="alias-input" floatingLabel label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"></paper-input>
<paper-input id="birth-year-input" floatingLabel label="Birth Year (eg: 1969)" validate="^[12][0-9][0-9][0-9]$"></paper-input>

<div center horizontal layout>
  <paper-button id="add-button" on-click="{{addPerson}}" class="add" label="Add Person"></paper-button>
</div>

为了处理这个标记，我有一个 addButton

To go along with this markup I have an addButton method which does:

addPerson(_) {
  // Add the person
  // ...

  // Clear the inputs
  ($['alias-input'] as PaperInput)..inputValue = ''..commit()..blur();
  ($['birth-year-input'] as PaperInput)..inputValue = ''..commit()..blur();
}

这正确地清除了我想要的输入内容。但我还希望PaperInput帮助标签下降到线，就像在控件第一次加载时。我的希望是，调用 blur（）会这样做。是否有其他调用来实现这一点？

This correctly clears the contents of the inputs, which I want. But I also want the PaperInput help label to drop down onto the line as it is when the control is first loaded. My hope was that the call to blur() would do that. Is there some other call to achieve this?

推荐答案

看起来你需要调用 blur 上的实际< input id ='input'> 元素< paper-input> 不是< paper-input> 本身。

我使用了

It seems you need to call blur on the actual <input id='input'> element inside <paper-input> not the <paper-input> itself.
I got it working with

import 'dart:js' as js;

var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
new js.JsObject.fromBrowserObject(inp).callMethod('inputBlurAction', []);

或者您可以这样做

var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
inp.querySelector('* /deep/ #input') // not yet supported with polyfills
..focus() // blur doesn't work when the field doesn't have the focus
..blur();

这篇关于如何以编程方式清除PaperInput，并将浮动标签下拉到输入行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！