Question

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

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

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

有任何建议，或者我是否会被卡在每个输入元素上？我也在使用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>

Answer 1

这样的事情就足够了......

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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或空字符串。

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

2 个答案: