Question

我试图记住contenteditable块中选择或多重选择表单元素的选择项。对于Firefox和Chrome，我只记得所选的项目，删除selected属性并标记应具有的属性。普通的DOM序列化将处理其余的工作。尝试使用IE或Edge进行操作失败很惨，因为它根本不起作用。以下是一个小的测试用例：

<!DOCTYPE html>
<html>
<body>
  <select multiple>
    <option id="op1" selected value="1">1</option>
  </select>
  <button onclick="var op1 = getElementById('op1'); op1.removeAttribute('selected'); alert(op1.outerHTML);">Test </button>
</body>
</html>

有人能在无需克隆具有属性的选项并将其替换为当前节点的情况下工作的方法吗？目标是IE 8+和Edge；较旧的IE无关紧要。

Answer 1

根据user3297291的建议，进行了后续搜索Issue #12087679 for Edge。整合其中的建议后，可以得到以下结果，这些结果适用于IE11，Edge，Chrome和Firefox的所有版本：

<!DOCTYPE html>
<html>
<body>
  <select multiple>
    <option id="op1" selected value="1">1</option>
  </select>
  <button onclick="var op1 = getElementById('op1');
                   op1.setAttribute('selected', false);
                   op1.selected = false;
                   op1.removeAttribute('selected');
                   alert(op1.outerHTML);">Test </button>
</body>
</html>

首先，明确确保该属性是布尔值，默认值不是（Edge bug）。接下来，禁用该属性以使Microsoft浏览器也删除该属性。最后，删除实现DOM级别1的世界其他地方的属性。

如何解决IE / Edge中损坏的removeAttribute？

1 个答案: