爲什麼我的textareas和文本輸入字段在可排序div中不適用於Chrome以外的所有瀏覽器？

我有一組由相應的jQuery UI控件呈現的可排序div。爲什麼我的textareas和文本輸入字段在可排序div中不適用於Chrome以外的所有瀏覽器？

我一直在測試這主要是在Chrome（到目前爲止），並在谷歌真正的時尚，他們找到一個辦法讓事情工作（即使有可能這會絆倒其他瀏覽器略有誤差）。現在，我不確定這是不是正在發生的事情，但可以這麼說，這種情況下的所有內容在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（還有一點，SRY基因有關，它是生成的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（再次，SRY這麼多，任何不ç oncern頁面的這一部分已經被去除，以不臃腫這篇文章任何比它已經是）：

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：

可能會出現問題，特別是使用jQuery可排序窗口小部件。最終，我不在乎這個瀏覽器（有沒有人除了微軟關心IE？）。當涉及到這個網絡應用程序時，我可以說它與IE不兼容。

火狐：

當您在文本區域或文本輸入字段點擊，他們獲得焦點，並且光標閃爍，但是，用戶通過點擊內的任何地方無法重新定位光標文本字段。同時拖動文本以突出顯示它是不可能的。如果使用方向鍵「向上」或「向下」，它將控制滾動條而不是文本光標。

其他瀏覽器：

同樣，我真的不在乎。我想獲得這個在Firefox中，除了鉻至少工作，但如果這是不可能的......

這裏是一個的jsfiddle ...：

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

。 ..但它看起來不好，排序不起作用，但文本字段的行爲仍然像我在我的環境中那樣行事，所以至少你可以看到。

有什麼建議可能會導致這種情況？

附加信息：

不知道這是否事項或沒有，但我現在用的DOCTYPE是：

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

來源

2013-10-07 VoidKing

的解釋與反對票去就好了。 – VoidKing

你有這樣的CSS樣本兩次（在table.editObjectsTable和.editObjectsTable * ）：

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

嘗試刪除它，如果你做n真的不需要它。這應該是一個修復。

來源

2013-10-07 16:06:17 EdenSource

現在看看這個...... – VoidKing

我真的希望這個答案比技術更簡單。我非常幸運。應用此修復後，IE仍然沒有做到這一點，但Firefox呢！既然這就是我的問題所要求的，那麼你已經得到了一個接受和贊成！非常感謝你！（另外，當在可排序容器內拖放時，IE在第二次排序後鎖定可排序接口）。 IE是否支持jQuery-ui，還是僅僅需要其他東西需要被髮掘？我知道我說過我不在乎，但如果它確實在IE中工作，那就更好了。 – VoidKing

對不起，現在沒有IE，我儘量盡力。但從我的owne經驗來看，IE 10和jquery-ui是一致的。我會告訴你。 – EdenSource

你的問題似乎在於以下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上都能正常工

來源

2013-10-07 16:48:10

如果您已經申請：

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

然後，當你完成你的排序，你將無法編輯任何輸入框 - 但複選框和收音機仍然可以工作。

解決方法很簡單：

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

例子：

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

      start: function (event, ui) { 

      }, 

      stop: function (event, ui) { 

      } 

    }).disableSelection();

來源

2014-07-22 09:35:58 Hemanth

雖然示例代碼中沒有包含disableSelection（），但是在我的情況下，它解決了問題，它具有disAbleSelection。 – 10us

爲什麼我的textareas和文本輸入字段在可排序div中不適用於Chrome以外的所有瀏覽器？

回答

相關問題