Question

我在内容可编辑div中有一个单选按钮。但是当我点击单选按钮时，Firefox和IE中没有任何反应。但它在Chrome中运行良好。

我可以做些什么才能在Firefox和IE中使用它？

代码位于http://jsbin.com/uqexoy/2/edit，简单来说就是：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div contentEditable="true"><input type="radio" />ere er er er re </div>
</body>
</html>

Answer 1

经测试可在IE8，IE9，Chrome和Firefox中使用。虽然相当奇怪，但确实如此，在Opera中，input field（在我们的例子中是radio button）确实将其状态更改为checked（使用JavaScript alert(this.checked);进行测试），但它并没有改变它的外观来反映这一点。请参阅下面的可能解决方法。

大多数有问题的浏览器的解决方案是将不可编辑的内容包装在span中，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div contentEditable="true">
    <span contentEditable="false">
      <input type="radio" />
    </span>ere er er er re 
  </div>
</body>
</html>

至于Opera部分，它不能反映radio button的{{1}}州'的变化应该'，可以通过设计其形式来覆盖CSS选择器selected和input[type="radio"]的两种不同状态，并将这两个CSS规则仅应用于Opera浏览器。 Opera似乎接受了input[type="radio"]:checked background-color的{{1}}属性更改，这在我测试过的所有其他浏览器中没有任何区别。这可能是您应用Opera特定CSS规则来反映更改的方法到radio buttons州。这是一个例子：

checked

其他浏览器将忽略此CSS规则。可以应用的另一个可接受的Opera特定规则是input[type="radio"]:checked {background-color:gray;}，但我发现在我们的情况下限制为无价值。

Answer 2

您使用DOMElement的contentEditable属性，如此

 <div onClick="this.contentEditable='true';"><input type="radio" />
    This is test
 </div>

内容可编辑div中的单选按钮

2 个答案: