HTML 表单字段在 Firefox 上无法选择，但在 Chrome 上无法选择

Question

我的 Symfony 2 应用程序中有以下标记，它使用 from_widget 和 form_row 生成表单。

<tr class="ui-sortable-handle" data-order="45">
    <form novalidate="" action="/administration/guide/9/row/45/update/" method="post"></form>
    <td style="width: 15%;">
        <select id="guide_row_channel" class=" form-control" name="guide_row[channel]">
            <option value="">All</option>
            <option value="1">Belleisle</option>
            <option value="2">Dalmilling</option>
            <option value="3">Seafield</option>
        </select>
    </td>

我的 Twig 模板是：

<tr data-order="{{ row.id }}">
    <form method="post" action="{{ path('guide_row_update', { 'GuideId' : guide.id, 'id' : row.id }) }}" novalidate>
    {{ form_widget(form.channel) }}
    // ... some more form_widget and form_row in here ...                   
        <td align="right" style="width: 110px;">
        // ... button in here ...               
        </td>
    </form>
</tr>

我遇到了一个问题，即表单字段在 Firefox 上无法选择，但在 Chrome 中却可以正常工作。

我是否有一些明显无效的 HTML，Chrome 可以放飞但 Firefox 没有？为什么表单会在标记中自动关闭？

Answer 1

这个问题是由 jQuery UI 配置引起的。

我在桌子上设置了sortable的类：

    <table class="table">
        <tbody class="sortable">

它在<tr>s 上分配了一个ui-sortable-handle 类（如我原来的问题所示）：

<tr class="ui-sortable-handle" data-order="45">

我的代码中还有以下 jQuery sn-p（顺便说一下，它是 not recommended by jQuery）

$(this, ".draggable").disableSelection();

删除上面的这一行解决了我的问题。

看起来确实是Firefox-related problem。

Answer 2

我是否有一些明显无效的 HTML [...]？

[来自 cmets] 我可以看到它是自动关闭的，但这是我的问题 - 为什么要这样做？

是的，您编写的 HTML 无效 - 您不能将 form 作为 tr 或 table 的子元素。

form 必须围绕整个table 元素，或者在td（或th）元素内部。

由于您的 HTML 代码无效，浏览器会在创建 DOM 时尝试自动更正 - 尽管 如何 自动更正是 HTML5 指定的，但浏览器仍然倾向于这样做那不同。由于form 不能将td 作为子元素，一些浏览器可能会在继续构建DOM 树之前关闭form。

提示：Validate 下次遇到此类问题时您的 HTML 代码。验证器会告诉你这种无效的元素嵌套。

Answer 3

表单在同一行打开和关闭：

<form novalidate="" action="/administration/guide/9/row/45/update/" method="post"></form>

这是你想要的吗？