FireFox：在contentEditable div中，为什么select元素无法获得焦点？

Question

以下是我的代码。我的问题是select元素无法获得焦点，因此我无法使用它来选择一个选项。

<div id='editpanel' class="editpanel" contentEditable='true' >
  <select>
     <option value ='volvo'>Volvo</option>
     <option value ='saab'>Saab</option>
     <option value='opel'>Opel</option>
     <option value='audi'>Audi</option>
  </select>
</div>

如何更改此选择元素以使其获得焦点，我该怎么办？我已经尝试过设置tabindex = -1。如果我在select元素上添加contentEditable = false，它会获得焦点，但无法删除。

其他元素如set contentEditable，它们仍然可以被删除，除了元素。

在Firefox 8中测试过。 我尝试了另一种方式，我做了一个div环绕选择，如：

<div><select contentEditable='false'>...</select></div>

可以设置焦点，可以删除，但div使当前行中断。

任何想法都表示赞赏。

Answer 1

如果在contentEditable div中有[select]等表单元素，它将继承该设置，并且不允许用户与该元素进行交互。只需设置[select contentEditable ='false']，您就可以毫无问题地与下拉列表进行交互。