html - Contenteditable 不适用于 Opera 中的表格

标签 html opera contenteditable

您知道为什么 contenteditable=true 在 Opera 中不起作用吗?

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tr>
        <td contenteditable="true">This is a paragraph. It is editable.</td>
      </tr>
    </table>
  </body>
</html>

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable

Opera 版本:12.16,版本 1860 平台:Mac OS 10.9.1

最佳答案

目前的支持相当不稳定。浏览器还没有完全跟上。

在完全支持之前,最简单的解决方案是在单元格内放置一个 DIVSPAN 并使其可编辑。请参阅 the related MSDN article 上的“备注”部分.

您还应该添加 min-height 样式规则。如果你忽略它,如果单元格中没有内容,它会缩小到 0px,并且用户将很难单击它来获取焦点。不过制表位应该可以正常工作。

这是我用于调试的东西:

TD > DIV[contenteditable="true"] {
    border: 1px dashed blue;
    min-height: 1em;
}

你的 DOM 结构将如下所示:

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tr>
        <td>
            <div contenteditable="true">This is a paragraph. It is editable.</div>
        </td>
      </tr>
    </table>
  </body>
</html>

关于html - Contenteditable 不适用于 Opera 中的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21090296/

相关文章:

reactjs - 如何使用 React 测试库测试 `contenteditable` 事件

javascript - 带有 div 的 jQuery,即使通过其 id 进行搜索也找不到

html - 数据库错误: The first argument to execute must be a string or unicode query in python

html - Bootstrap 网格拉/推行

browser - Opera 用户代理 : Opera or OPR?

html - 强制 IE contentEditable 元素在 Enter 键上创建换行符,而不中断撤消

javascript - 最小化 jquery.append 繁重站点的 DOM 访问

javascript - Opera 提交时 javascript 问题

html - 基于 Zurb 的 Foundation 3.2.5 的布局和 Opera 中某些页面的额外宽度

javascript - HTML5 内容可编辑触发器开/关