dart - 如何以编程方式清除 PaperInput 并将浮动标签下拉到输入行

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