dart - 如何以编程方式清除PaperInput并使 float 标签下降到输入行

Question

我有以下标记:

<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方法，它可以:

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

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

这样可以正确清除我想要的输入内容。但是我也希望PaperInput帮助标签像第一次加载控件时一样放到该行上。我希望对blur()的调用能够做到这一点。还有其他要求实现这一目标的电话吗？

Answer 1

似乎您需要在blur内的实际<input id='input'>元素上调用<paper-input>，而不是<paper-input>本身。
我明白了

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();