1

我目前正在流星keyup中设计一个用户界面，其中包含几个文本输入，其内容在更改（事件）时保存到会话变量中。由于该preserve-inputs软件包，这些输入框在它们处于焦点时不会重新渲染。

我现在尝试默认禁用这些输入框并使其在双击时可编辑（这可能是一个糟糕的选择，但它对于手头的问题来说是最简单的，对于初稿来说已经足够了——也许我会问稍后在 UX 上）。但是，当最初禁用时，输入框不会被保留并在输入单个字符时重新呈现，再次禁用它。

虽然保留不可编辑的元素不被重新渲染通常是没有意义的，但我在代码中找不到任何会歧视disabled状态的东西。那么它在哪里，我该如何规避呢？（当然，我可以disabled在双击/模糊时设置会话变量并将输入框重新渲染为启用状态，但这对我来说似乎过于复杂）。

下面的代码（注意它是纯粹的客户端 JavaScript）重现了这个问题。它还呈现第二个输入框，该输入框永远不会被禁用，但也只能在双击后访问。这可以按预期工作而无需重新渲染。现场演示部署到http://preserve-disabled-inputs.meteor.com/。

disabled.html：

<head>
  <title>disabled</title>
</head>
<body>
  {{> body}}
</body>

<template name="body">
  <p>Double-click to enter text</p>
  {{> input f}}
  {{> input t}}
</template>

<template name="input">
  <div style="position: relative; width: 400px;">
    <input id="{{id}}" class="input" type="text" value="{{value}}" style="width: 100%;" {{disabled}}/>
    <!-- events on disabled inputs are not triggered -->
    <!-- overlay with transparent div to catch clicks -->
    <div class="catch" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;" />
  </div>
</template>

disabled.js：

if (Meteor.isClient) {
  // Setup for the example
  Session.setDefault('valuefalse', 'This one is preserved and can be edited without problems');
  Session.setDefault('valuetrue', 'This one is not preserved and loses focus on edit');

  Template.body.t = function() {
    return { disabled: true };
  }

  Template.body.f = function() {
    return { disabled: false };
  }

  Template.input.disabled = function() {
    return this.disabled ? 'disabled="disabled" ' : '';
  }

  Template.input.id = function() {
    return this.disabled ? 'd' : 'e';
  }

  Template.input.value = function() {
    return Session.get('value' + this.disabled);
  }

  // Here goes ...
  Template.input.events({
    'dblclick div.catch': function (evt) {
      var input = $('input.input', evt.target.parentNode);
      // Enable text box
      input.removeAttr('disabled');
      input.focus();
      // Don't render the div so the input box becomes accessible
      evt.target.style.display = 'none';
    },
    'keyup input.input': function (evt) {
      Session.set('value' + this.disabled, evt.target.value);
    },
    'blur input.input': function(evt) {
      // Re-render the catcher div
      $('div.catch', evt.target.parentNode).css('display', '');
      // Disable text box, if appliccable
      if (this.disabled) evt.target.disabled = 'disabled';
    }
  });
}
4

1 回答 1

1

对我来说，唯一可行的选项是定义 disabled="true"，因此代码如下所示：

disabled="{{#if isDisabled}}true{{/if}}"

如果 isDisabled 为 false，Meteor 甚至不会在 DOM 中渲染/显示禁用的标签（例如 disabled=""）。

于 2015-10-06T14:49:41.400 回答