Question

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

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

然而，一旦显示输入并给出焦点，退出该场（例如，通过点击外部），第一次不触发模糊处理方法。在第二次重复该过程时，触发模糊。对于要开火的方法，每次都要进入两次。

如何避免两次进入输入字段以触发 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并允许在调用focus()之前取消隐藏InputElement。

On-blur处理程序仅在备用事件上触发

1 个答案: