Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.0k views
in Technique[技术] by (71.8m points)

dart - How to programmatically clear PaperInput and have the floating label drop down to the input line

I have the following markup:

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

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

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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', []);

alternatively you can do it like

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...