启用禁用输入框的文本选择功能。

Question

启用禁用输入框的文本选择功能。

htmlangularjs

6

我有一个大型表单，其中有许多输入元素，需要在用户点击按钮之前不可编辑，但需要允许选择文本以将值复制到其他表单中。

我的现有解决方案是将输入包装在禁用的 fieldset 中，这在最新的 Chrome 版本中无法在禁用的输入上进行文本选择。

其他问题中建议使用 readonly 属性，但它不支持 fieldsets，因此不会级联到子元素（请参见代码片段）。

有什么建议吗？还是我必须为每个输入元素添加 readonly？我还使用 AngularJS，如果有一个 Angular 解决方案可能也可以。

编辑：我应该指出，我已经考虑过使用 ngReadonly（目前在 fieldset 上使用 ngDisabled），但 ngReadonly 不适用于 fieldsets，并且必须添加到应用程序中的几百个输入中。

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>
<body>
  <fieldset disabled>
    <input value="I am disabled by my parent" />
  </fieldset>

  <fieldset readonly>
    <input value="I am readonly" readonly/>
    <input value="I am not readonly, despite my parent" />
  </fieldset>
</body>
</html>

- Adam Axtmann

如果您创建了一个涵盖元素所有子元素并添加了readonly属性的策略。 - Carlos Laspina

- Mackan · Accepted Answer

也许这样就足够了...这可能不是非常符合 Angular 思想，但它可以让您保留现有的结构。

angular.element(document.querySelectorAll("fieldset[readonly]")).children('input').attr('readonly','readonly');

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html>
<body>
  <fieldset disabled>
    <input value="I am disabled by my parent" />
  </fieldset>

  <fieldset readonly>
    <input value="I am readonly" readonly/>
    <input value="I am not readonly, despite my parent" />
  </fieldset>
</body>
</html>