jquery - 为什么除了 Chrome 之外的所有浏览器都无法编辑可排序 div 中的文本区域和文本输入字段？

Question

我有一组由相应的 jQuery ui 小部件呈现的可排序 div。

我一直主要在 Chrome 中进行测试（到目前为止），并且以真正的 Google 方式，他们找到了一种使事情正常运行的方法（即使可能存在会绊倒其他浏览器的轻微错误）。现在，我不确定这是否真的发生了，但我只想说，这种情况下的一切在 Google Chrome 中都可以正常工作，但在任何其他浏览器中都不能正常工作。

这里有很多代码，所以如果您认为您可能知道 jQuery-ui 的可排序小部件如何在非 Chrome 浏览器中导致这些问题，请随意跳过。也许有人可以提示我检查一些简单的场景，但是如果它是技术性的并且您仍然想帮助我，那么所有代码​​和标记都在下面。

这是相关的 jQuery（停止回调函数目前仅包含测试数据）：

$(".editContainer").sortable({
    revert: true,
    cursor: "move",
    stop: function (event, ui) {
        $(this).find(".editObjectsTable").each(function () {
            console.log($(this).find(".pageOrderNum").text());
        });
    }
});

关于 HTML（有一点，很抱歉。它是 C# 生成的，为了便于阅读，我必须逐行格式化）：

<div class="editContainer">
    <table class="editObjectsTable">
        <tr>
            <td class="pageOrderNum" rowspan="2">1.</td>
            <td rowspan="2" class="objectName">Paragraph</td>
            <td class="settingType">Text Content</td><td class="settingType">Text Alignment</td>
            <td class="settingType">Highlight</td>
            <td class="objectControlButtonHolder" rowspan="2">
                <button class="deleteObjectBtn">X</button>
                <input id="objID" type="hidden" value="181" />
            </td>
        </tr>
        <tr>
            <td class="textAreaHolder">
                <textarea maxlength="4000" class="editTextArea">Please accept our invitation to participate in the Connect-CTY notification service. We know your personal information is important, and rest assured that we will not share it with anyone. If you have NOT already received a test phone call from us, or you would like to provide additional contact information, click the Connect-CTY image below to sign up.</textarea>
            </td>
            <td class="alignmentTableHolder">
                <table class="alignmentTable">
                    <tr>
                        <td class="alignmentRadioHolder">
                        <input id="inputRadioLeft181" type="radio" name="paragraphAlignment181" value="left" />
                        </td>
                        <td class="alignmentRadioHolder">
                            <input id="inputRadioCenter181" type="radio" checked="checked" name="paragraphAlignment181" value="center" />
                        </td>
                        <td class="alignmentRadioHolder">
                            <input id="inputRadioRight181" type="radio" name="paragraphAlignment181" value="right" />
                        </td>
                        <td class="alignmentRadioHolder">
                            <input id="inputRadioJustify181" type="radio" name="paragraphAlignment181" value="justify" />
                        </td>
                    </tr>
                    <tr>
                        <td class="alignmentLabelHolder">
                            <label for="inputRadioLeft181">Left</label>
                        </td>
                        <td class="alignmentLabelHolder">
                            <label for="inputRadioCenter181">Center</label>
                        </td>
                        <td class="alignmentLabelHolder">
                            <label for="inputRadioRight181">Right</label>
                        </td>
                        <td class="alignmentLabelHolder">
                            <label for="inputRadioJustify181">Justify</label>
                        </td>
                    </tr>
                </table>
            </td>
            <td class="highlightTableHolder">
                <table class="highlightTable">
                    <tr>
                        <td class="highlightCheckboxHolder">
                            <input id="inputCheckboxItalic181" type="checkbox" name="paragraphHighlight181" value="italic" />
                        </td>
                        <td class="highlightCheckboxHolder">
                            <input id="inputCheckboxBold181" type="checkbox" name="paragraphHighlight181" value="bold" />
                        </td>
                        <td class="highlightCheckboxHolder">
                            <input id="inputCheckboxUnderline181" type="checkbox" name="paragraphHighlight181" value="underline" />
                        </td>
                    </tr>
                    <tr>
                        <td class="highlightLabelHolder">
                            <label for="inputCheckboxItalic181">Italic</label>
                        </td>
                        <td class="highlightLabelHolder">
                            <label for="inputCheckboxBold181">Bold</label>
                        </td>
                        <td class="highlightLabelHolder">
                            <label for="inputCheckboxUnderline181">Underline</label>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table class="editObjectsTable">
        <tr>
            <td class="pageOrderNum">2.</td><td class="objectName">--Line Break--</td>
            <td class="objectControlButtonHolder">
                <button class="deleteObjectBtn">X</button>
                <input id="objID" type="hidden" value="182" />
           </td>
        </tr>
    </table>
    <table class="editObjectsTable">
        <tr>
            <td class="pageOrderNum" rowspan="4">3.</td>
            <td rowspan="4" class="objectName">Image-Link</td>
            <td class="settingType">File Name</td>
            <td class="settingType">Size</td>
            <td class="settingType">New Tab</td>
            <td class="objectControlButtonHolder" rowspan="4">
                <button class="deleteObjectBtn">X</button>
                <input id="objID" type="hidden" value="183" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" maxlength="260" class="editTextInputLeft" value="CTY.gif" />
            </td>
            <td class="sizeTableHolder">
                <table class="sizeTable">
                    <tr>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioThumb183" type="radio" name="imageSize183" value="thumb" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioSmall183" type="radio" name="imageSize183" value="small" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioMedium183" type="radio" name="imageSize183" value="medium" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioLarge183" type="radio" name="imageSize183" value="large" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioWideSmall183" type="radio" name="imageSize183" value="wideSmall" />
                        </td>
                    </tr>
                    <tr>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioThumb183">Thumb</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioSmall183">Small</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioMedium183">Medium</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioLarge183">Large</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioWideSmall183">Wide-Sm.</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioWideMedium183" type="radio" name="imageSize183" value="wideMedium" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioWideLarge183" type="radio" name="imageSize183" value="wideLarge" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioTallSmall183" type="radio" checked="checked" name="imageSize183" value="tallSmall" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioTallMedium183" type="radio" name="imageSize183" value="tallMedium" />
                        </td>
                        <td class="sizeRadioHolder">
                            <input id="inputRadioTallLarge183" type="radio" name="imageSize183" value="tallLarge" />
                        </td>
                    </tr>
                    <tr>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioWideMedium183">Wide-Med.</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioWideLarge183">Wide-Lg.</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioTallSmall183">Tall-Sm.</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioTallMedium183">Tall-Med.</label>
                        </td>
                        <td class="sizeLabelHolder">
                            <label for="inputRadioTallLarge183">Tall-Lg.</label>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="newTabTable">
                    <tr>
                        <td class="newTabRadioHolder">
                            <input id="inputRadioTrue183" type="radio" checked="checked" name="linkNewTab183" value="true" />
                        </td>
                        <td class="newTabRadioHolder">
                            <input id="inputRadioFalse183" type="radio" name="linkNewTab183" value="false" />
                        </td>
                    </tr>
                    <tr>
                        <td class="newTabLabelHolder">
                            <label for="inputRadioTrue183">True</label>
                        </td>
                        <td class="newTabLabelHolder">
                            <label for="inputRadioFalse183">False</label>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="settingType settingType2">Target</td>
            <td class="settingType settingType2">Caption</td>
            <td class="settingType settingType2">Preview</td>
        </tr>
        <tr>
            <td>
                <input maxlength="2000" class="editTextInputLeft" value="https://portal.blackboardconnectcty.com/welcome.aspx?eiid=1207B6088C3571A76F7E" />
                <br/>
                <span class="testLink">Test</span>
            </td>
            <td>
                <input type="text" maxlength="500" class="editTextInputLeft" value="" />
            </td>
            <td>
                <img class="contentImgThumb" src="/CMS Files/EmergencyNotificationSystem/CTY.gif" title="CTY.gif" alt="CTY.gif" />
            </td>
        </tr>
    </table>
</div>

这是任何有关 CSS 的内容（再次抱歉，所有与页面的这一部分无关的内容都已删除，以免使这篇文章变得比现在更臃肿）：

div.editContainer
{
    width: 94%;
    height: 400px;
    overflow-y: scroll;
    border: 1px solid #000;
    text-align: center;
    margin: auto;
    resize: vertical;
}

div.editPreview
{
    width: 852px;
    margin-left: 0px;
    padding-top: 15px;
    border-top: 5px double #003500;
}

.editLabelTitle
{
    font-size: 1.5em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: bold;
    color: #003500;
}

table.editObjectsTable
{
    width: 100%;
    margin: auto;
    border: 1px solid #888;
    cursor: pointer;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ffecb4;
    /* Opera 11.10+ */
    background: -o-linear-gradient(bottom, #f5d77d, #ffecb4);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(bottom, #f5d77d, #ffecb4);
    /* Chrome 7+ & Safari 5.03+ */
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5d77d), color-stop(1, #ffecb4));
    /* Newer Browsers */
    background: linear-gradient(bottom, #f5d77d, #ffecb4);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d)";
    /* IE5.5 - IE7 */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d);
}

.editObjectsTable *
{
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table.editObjectsTable tr td
{
    border-left: 1px dashed #888;
}

td.objectName
{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #22862a;
    vertical-align: middle;
    padding-right: 5px;
    border-left: none !important;
}

input.editTextInputCenter
{
    width: 95%;
    resize: none;
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
}

input.editTextInputLeft
{
    width: 95%;
    resize: none;
    margin-right: 0px;
    margin-left: 0px;
    text-align: left;
}

textarea.editTextArea
{
    width: 95%;
    height: 80px;
    resize: vertical;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 4px;
}

table.alignmentTable, table.highlightTable, table.newTabTable, table.sizeTable
{
    width: 100%;
}

td.alignmentRadioHolder, td.highlightCheckboxHolder, td.newTabRadioHolder, td.sizeRadioHolder
{
    vertical-align: bottom;
    text-align: center;
    border-left: none !important;
}

td.highlightCheckboxHolder, td.highlightLabelHolder
{
    width: 33%;
    border-left: none !important;
}

td.newTabLabelHolder
{
    width: 50%;
    border-left: none !important;
}

td.alignmentLabelHolder, td.highlightLabelHolder, td.newTabLabelHolder, td.sizeLabelHolder
{
    vertical-align: top;
    font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
    color: #000;
    vertical-align: top;
    text-align: center;
    font-size: .8em;
    border-left: none !important;
}

td.settingType
{
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
    color: #660000;
    position: relative;
}

td.settingType2
{
    border-top: 1px dashed #888;
}

td.pageOrderNum
{
    width: 50px;
    text-align: center;
    font-size: 17px;
    font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
    color: #826c2c;
    border-left: none !important;
}

td.objectControlButtonHolder
{
    width: 30px;
    vertical-align: middle;
}

td.highlightTableHolder
{
    width: 160px;
}

td.alignmentTableHolder
{
    width: 160px;
}

td.sizeTableHolder
{

}

td.textAreaHolder
{
    min-width: 280px;
}

td.picPreviewHolder
{

}

img.picPreview
{
    width: 55px;
    height: 55px;
}

.deleteObjectBtn {
    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    -moz-border-radius-topright:20px;
    border-top-right-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    -moz-border-radius-bottomright:20px;
    border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    text-indent:0;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:10px;
    font-weight:bold;
    font-style:normal;
    height:15px;
    line-height:8px;
    width:22px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #b23e35;
}
.deleteObjectBtn:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color:#ce0100;
    cursor: pointer;
}.deleteObjectBtn:active {
    position:relative;
    top:1px;
}

最后，行为：

铬合金：

完美运行

IE 10：

可能会出现故障，尤其是在使用 jQuery 可排序小部件的情况下。归根结底，我不关心这个浏览器（除了微软还有人关心 IE 吗？）。说到这个网络应用程序，我可以说它与 IE 不兼容。

火狐：

当您单击文本区域或文本输入字段时，它们会获得焦点，并且光标会闪烁，但是，用户无法通过单击文本字段中的任何位置来重新定位光标。拖动文本以突出显示它是不可能的。如果使用箭头键“向上”或“向下”，它控制滚动条，而不是文本光标。

其它浏览器：

再说一次，我真的不在乎。除了 Chrome 之外，我想让它至少在 Firefox 中工作，但如果不可能......

这是一个jsFiddle ...：

http://jsfiddle.net/dMen8/18/

...但它看起来很糟糕并且可排序不起作用，但文本字段的行为仍然像在我的环境中一样，所以至少你可以看到这一点。

关于可能导致这种情况的任何建议？

附加信息：

不确定这是否重要，但我使用的文档类型是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 1

如果您已申请：

$( "#sortable" ).disableSelection();

然后，当您完成排序后，您将无法编辑任何输入框——但复选框和收音机仍然可以使用。

解决方案很简单：

$( "#sortable" ).enableSelection();

例子 ：

         $("#myId tbody").sortable({
             group: 'no-drop',
             handle: '#id',

             start: function (event, ui) {

             },

            stop: function (event, ui) {

            }

    }).disableSelection();

Answer 2

您有两次此 CSS 示例（在table.editObjectsTable和.editObjectsTable*）：

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

如果您真的不需要它，请尝试删除它。这应该是一个修复。

Answer 3

您的问题似乎在于以下 CSS 设置：

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

.editObjectsTable *从and中删除它table.editObjectsTable，它在 IE 上工作。对不起，我没有在这台机器上安装 FF 来测试。无论哪种方式，都可以在 Chrome 上正常工作。