On-blur 处理程序仅在交替事件上触发

Question

我有一个自定义元素，它会在单击时切换 span 和 input 元素的隐藏状态，这样用户每次单击时都会感觉到 span 被输入替换了。

我希望输入在失去焦点时切换回隐藏状态并切换到可见状态。

但是，一旦显示输入并获得焦点，退出字段（例如，通过单击外部），模糊处理程序方法不会第一次触发。第二次重复该过程时，会触发模糊。触发方法需要进场两次，每次。

如何避免需要输入两次输入框来触发on-blur事件？

我包含我的代码。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <link rel="import" href="packages/polymer/polymer.html">
  <link rel="import" href="toggle_el.html">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <toggle-el></toggle-el>
  <script type="application/dart" src='main.dart'></script>
</body>
</html>

我正在从 main.dart

初始化聚合物

import 'package:polymer/polymer.dart';

main() {
  initPolymer();
}

自定义元素 html 文件：toggle_el.html

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="toggle-el">
  <template>
    <span hidden?="{{editMode}}" 
        on-click="{{switchEdit}}" id="name">{{name}}</span>
    <input id="nmInput" hidden?="{{!editMode}}" 
        on-blur="{{switchEdit}}" type="text"
        value="{{name}}"/>
  </template>
  <script type="application/dart" src="toggle_el.dart"></script>
</polymer-element>

自定义元素飞镖文件：toggle_el.dart

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('toggle-el')
class toggleElement extends PolymerElement {
  @observable String name = 'Dartgnan';
  @observable bool editMode = false;

  toggleElement.created() : super.created();

  @override ready();

  void switchEdit(Event ev, var detail, Node sender) {
    editMode = !editMode;
    print('edit mode is now ${editMode ? 'on' : 'off'}');
    if (editMode) {
      InputElement el = $['nmInput'];
      el.focus();
      el.selectionStart = 0;
      el.selectionEnd = 999;
    }
  } 
}

Answer 1

只需将 el.focus(); 更改为 new Future(() => el.focus());。这样您可以稍微延迟 focus 并允许 InputElement 在调用 focus() 之前取消隐藏。

On-blur 处理程序仅在交替事件上触发

On-blur handler is triggered only on alternate events

dart

dart-polymer