4

我在内容可编辑的 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>
4

2 回答 2

3

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

大多数有问题的浏览器的解决方案是将不可编辑的内容包装在 a 中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 部分，它不反映对 'should' 状态的更改这一事实radio button可以通过selected使用CSS 选择器设置其两个不同状态的样式并将这两个 CSS 规则仅应用于 Opera 浏览器来覆盖。Opera 似乎接受这样的属性更改，这在我测试过的所有其他浏览器中没有任何区别。这可能是您应用 Opera 特定 CSS 规则以反映状态更改的方式。这是一个例子：input[type="radio"]input[type="radio"]:checkedbackground-colorradio buttonschecked

input[type="radio"]:checked {background-color:gray;}

其他浏览器将简单地忽略此 CSS 规则。可以应用的另一个可接受的 Opera 特定规则是border，但我发现在我们的案例中它没有任何价值。

于 2013-01-28T04:19:52.687 回答
0

您使用 DOMElement 的 contentEditable 属性，就像这样

 <div onClick="this.contentEditable='true';"><input type="radio" />
    This is test
 </div>
于 2013-01-28T04:13:43.773 回答