在禁用的输入上启用文本选择答案

【问题标题】：Enable text selection on disabled inputs在禁用的输入上启用文本选择
【发布时间】：2016-11-01 14:05:28
【问题描述】：

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

我现有的解决方案是将输入包装在禁用的字段集中，直到最新的 Chrome 版本才允许在禁用的输入上选择文本。

此处的其他问题已建议使用 readonly 属性，但字段集不支持它，因此它不会级联到子元素（参见代码 sn-p）。

有什么建议吗，或者我会被卡住为每个输入元素添加只读吗？我也在使用 AngularJS，所以如果有一个角度解决方案也可以。

编辑：我应该注意我考虑过使用 ngReadonly（目前在字段集上使用 ngDisabled），但 ngReadonly 不适用于字段集，并且必须添加到我的应用程序中的数百个输入中。



<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>

【问题讨论】：

如果你创建了一个覆盖元素所有子元素的策略并添加了只读属性

标签： html angularjs

【解决方案1】：

也许这样就足够了..

这可能不是很角度思考，但它可以让你保持现有的结构。

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>

【讨论】：

【解决方案2】：

由于你使用的是 AngularJS，你可以这样想：

<html>
<body>
  <fieldset disabled>
    <input value="I am disabled by my parent" />
  </fieldset>

  <fieldset>
    <input value="I am readonly" {{Shold_Be_Readonly_or_Not}}/>
    ...
  </fieldset>
</body>
</html>

在控制器中，将$scope.Shold_Be_Readonly_or_Not 设置为readonly 或空字符串。

【讨论】：

Angular 有 ngReadonly，它本质上就是这样做的。不过，我想避免使用它，因为这需要添加到我的应用程序中的数百个输入中。
@AdamAxtmann，当然，我忘记了 ngReadonly。无论您找到什么解决方案，它都将要求您（至少）访问所有数百个输入字段（只是检查逻辑是否正常或进行一些小的更改）。