javascript - Knockout hasFocus 与数字输入的绑定(bind)在 Firefox 上不起作用

Question

我有一个包含货币值的输入字段。当输入字段没有焦点时，我试图显示格式化的货币金额。输入字段类型设置为数字。虽然这在 Chrome、IE 和 Edge 上运行良好；在 firefox 上，输入文本框在获得焦点后立即失去焦点。这是简化的 jsfiddle

https://jsfiddle.net/nkkfmLmc/2/

这类似于 http://knockoutjs.com/documentation/hasfocus-binding.html 中的示例 2 ，数字字段除外。如果我将输入类型从数字更改为文本(但也失去了所有优势)，问题就解决了。任何指示或解决方法将不胜感激。

HTML:

<p>
    Name: 
    <b data-bind="visible: !editing(), text: '$'+amount(), click: edit">&nbsp;</b>
    <input type="number" min="0" max="100" step="1" data-bind="visible: editing, value: amount, hasFocus: editing" />
</p>
<p><em>Click the amount to edit it; click elsewhere to apply changes.</em></p>

JS:

function PersonViewModel(amount) {
    // Data
    this.amount = ko.observable(amount);
    this.editing = ko.observable(false);

    // Behaviors
    this.edit = function() { this.editing(true) }
}

ko.applyBindings(new PersonViewModel(51.22));

Answer 1

hasFocus 绑定(bind)与 Document.activeElement 一起确定哪个元素处于焦点:

来源:https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/hasfocus.js#L17

var ownerDoc = element.ownerDocument;
if ("activeElement" in ownerDoc) {
  var active;
  try {
    active = ownerDoc.activeElement;
  } catch (e) {
    // IE9 throws if you access activeElement during page load (see issue #703)
    active = ownerDoc.body;
  }
  isFocused = (active === element);
}

当在您的 fiddle 中逐步执行此绑定(bind)时，我注意到它返回 body 元素作为文档的 activeElement，使 isFocused 成为 假。

关于MDN documentation关于 activeElement 的页面，然后我阅读:

Note: On Mac, elements that aren't text input elements tend not to get focus assigned to them.

对我来说，这表明在 number 输入中根本不支持这种绑定(bind)。

我建议:

• 坚持使用文本输入并添加自定义向上和向下按钮和关键监听器
• 创建一个基于事件监听器而不是 document.activeElement 的自定义绑定(bind)。

knockout 开发人员可能有充分的理由坚持使用 activeElement 方法。他们在评论中指出:

// Where possible, ignore which event was raised and determine focus state using activeElement,
// as this avoids phantom focus/blur events raised when changing tabs in modern browsers.
// However, not all KO-targeted browsers (Firefox 2) support activeElement. For those browsers,
// prevent a loss of focus when changing tabs/windows by setting a flag that prevents hasfocus
// from calling 'blur()' on the element when it loses focus.
// Discussion at https://github.com/SteveSanderson/knockout/pull/352

所以选择第一个选项可能是明智的...