Почему мои текстовые поля и поля ввода текста в сортируемых элементах div не редактируются для всех браузеров, кроме Chrome?

0

У меня есть группа сортируемых div, которые отображаются соответствующим виджетами jQuery ui.

Я тестировал это, главным образом, в 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 (есть немного, прошу про это. Он сгенерирован С#, и для чтения я должен был использовать линейный формат):

<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;
}

И, наконец, behovior:

Хром:

Прекрасно работает

IE 10:

Glitchy как может быть, особенно с помощью сортируемого виджета jQuery. В конечном счете, меня не волнует этот браузер (разве кто-нибудь, кроме Microsoft, не заботится об IE?). Когда дело доходит до этого веб-приложения, я могу сказать, что он несовместим с IE.

Fire Fox:

Когда вы нажимаете поля ввода текста или текста, они получают фокус, а курсор мигает, однако пользователь не может переместить курсор, щелкнув в любом месте текстового поля. Также перетаскивание текста для выделения невозможно. Если используются клавиши со стрелками "вверх" или "вниз", он управляет полосой прокрутки, а не текстовым курсором.

Другие браузеры:

Опять же, мне все равно. Я хотел бы получить это, по крайней мере, в Firefox в дополнение к Chrome, но если это невозможно...

И вот jsFiddle...:

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

... но это выглядит плохо, и сортировка не работает, но поведение текстовых полей по-прежнему действует так же, как и в моей среде, поэтому, по крайней мере, вы сможете это увидеть.

Любые предложения о том, что может быть причиной этого?

Дополнительная информация:

Не уверен, что это имеет значение или нет, но тип doctype, который я использую:

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

  • 0
    Объяснение, чтобы пойти с понижением, было бы хорошо.
Теги:
jquery-ui-sortable
asp.net-webpages

3 ответа

1
Лучший ответ

У вас есть этот пример CSS дважды (в table.editObjectsTable и .editObjectsTable *):

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

Попробуйте удалить его, если вам это действительно не нужно. Это должно быть исправление.

Поделиться
  • 0
    Глядя на это сейчас ...
  • 0
    Я действительно надеялся, что этот ответ будет более простым, чем технический. Мне очень повезло в этом. После применения этого исправления IE все еще не делает это правильно, но Firefox делает это! Так как это все, что требовалось в моем вопросе, вы получили согласие и поддержку! Большое спасибо! (Отдельно при перетаскивании в сортируемый контейнер IE блокирует сортируемый интерфейс после второй сортировки). Поддерживает ли IE jQuery-ui, или это просто что-то еще, что нужно исключить? Я знаю, что сказал, что мне все равно, но если это все-таки заработало в IE, тем лучше.
Показать ещё 3 комментария
5

Если вы применили:

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

Затем, когда вы закончите сортировку, вы не сможете редактировать любые поля ввода, но флажки и радиостанции все равно будут работать.

Решение прост:

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

Пример:

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

             start: function (event, ui) {

             },

            stop: function (event, ui) {

            }

    }).disableSelection();
Поделиться
  • 0
    Хотя пример кода не включал disableSelection (), это решило проблему в моем случае, когда он имел disAbleSelection.
1

Ваша проблема заключается в следующих настройках CSS:

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

Удалив это из .editObjectsTable * и table.editObjectsTable, он работал над IE. Извините, у меня нет FF, установленного на этой машине, чтобы проверить. Прекрасно работает на Chrome.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню