HTML Select菜单随机无响应

Question

HTML Select菜单随机无响应

我在<select>菜单上遇到了一个奇怪的问题.当我回到一个包含了<select>之后我点击它(或最小化它)的页面时,<select>有时会崩溃并变得无法响应.我检查了所有代码,它是100%有效的,我进一步看到这种情况也发生在其他网站上.

我<select>在最新版本的Safari(适用于OSX 10.6.8)以及最新版本的Chrome和Firefox(在Windows Vista和OSX 10.6.8上都经过测试)中体验过菜单折叠.奇怪的是,我无法重现在<select>Windows 8上运行的Chrome中的崩溃......最后一点:看起来<select>元素的长度会影响菜单崩溃的可能性(也就是说,<option>元素中的元素越多)<select>,崩溃的可能性越大.有时<select>菜单会在被选中并单击一次后崩溃,有时可能需要5次或6次尝试.

我的问题是:导致<select>崩溃的原因是什么,是否有一个已知的工作？请看下面的示例代码,它非常简单,但是在<select>我之前提到的浏览器/操作系统中菜单仍然崩溃了.提前致谢!

<!doctype html>
<html>
<head>
  <title>Select Test</title>
</head>

<body>
 <select name ="Test">
  <option value = "0">0</option>
  <option value = "1">1</option>
  <option value = "2">2</option>
  <option value = "3">3</option>
  <option value = "4">4</option>
  <option value = "5">5</option>
  <option value = "6">6</option>
  <option value = "7">7</option>
  <option value = "8">8</option>
  <option value = "9">9</option>
  <option value = "10">10</option>
  <option value = "11">11</option>
  <option value = "12">12</option>
  <option value = "13">13</option>
  <option value = "14">14</option>
  <option value = "15">15</option>
  <option value = "16">16</option>
  <option value = "17">17</option>
  <option value = "18">18</option>
  <option value = "19">19</option>
  <option value = "20">20</option>
  <option value = "21">21</option>
  <option value = "22">22</option>
  <option value = "23">23</option>
  <option value = "24">24</option>
  <option value = "25">25</option>
  <option value = "26">26</option>
  <option value = "27">27</option>
  <option value = "28">28</option>
  <option value = "29">29</option>
  <option value = "30">30</option>
  <option value = "31">31</option>
  <option value = "32">32</option>
  <option value = "33">33</option>
  <option value = "34">34</option>
  <option value = "35">35</option>
  <option value = "36">36</option>
  <option value = "37">37</option>
  <option value = "38">38</option>
  <option value = "39">39</option>
  <option value = "40">40</option>
  <option value = "41">41</option>
  <option value = "42">42</option>
  <option value = "43">43</option>
  <option value = "44">44</option>
  <option value = "45">45</option>
  <option value = "46">46</option>
  <option value = "47">47</option>
  <option value = "48">48</option>
  <option value = "49">49</option>
  <option value = "50">50</option>
  <option value = "51">51</option>
  <option value = "52">52</option>
  <option value = "53">53</option>
  <option value = "54">54</option>
  <option value = "55">55</option>
  <option value = "56">56</option>
  <option value = "57">57</option>
  <option value = "58">58</option>
  <option value = "59">59</option>
  <option value = "60">60</option>
  <option value = "61">61</option>
  <option value = "62">62</option>
  <option value = "63">63</option>
  <option value = "64">64</option>
  <option value = "65">65</option>
  <option value = "66">66</option>
  <option value = "67">67</option>
  <option value = "68">68</option>
  <option value = "69">69</option>
  <option value = "70">70</option>
  <option value = "71">71</option>
  <option value = "72">72</option>
  <option value = "73">73</option>
  <option value = "74">74</option>
  <option value = "75">75</option>
 </select>
 </body>
</html>

Run Code Online (Sandbox Code Playgroud)

更新: 这是<select>在OSX 10.6.8上运行的Safari 5.1.9中折叠/无响应菜单的屏幕截图(这是一个与我之前使用的不同的mac).3次尝试后(选择一个选项,然后单击浏览器),它变得没有响应.单击时它不会显示选项列表,并且在重新加载页面之前完全没有响应.我马上就会在mac上下载chrome.

更新2: 根据@ webdad3,此问题也出现在IE9中

更新3:

这是我在上面发布的源代码的链接,但是在JSbin中.由@starbeamrainbowlabs友情提供.

http://jsbin.com/eXOMeRI/1/edit

更新4:

根据@ Zarazthuztra,OSX 10.8中也出现了这个问题.

更新5:

我正在接受@ cloudcoder2000的建议并在问题本身中发布此链接.我相信它表明a <select>不应该崩溃(就像我们许多人所经历的那样),无论<option>它包含的数量是多少.

HTML下拉控件中是否有最大数量的选项(值)？

到目前为止,我还要感谢大家的帮助.

更新6: 我担心这个问题开始停滞不前......如果有人有任何关于造成这个问题的理论(无论看起来有多么"离谱")让我知道,我会测试它尽快.

更新7:请 确认:我在几个不使用Javascript的页面上遇到过这个崩溃问题.此外,上面发布的示例代码(不包含任何Javascript)已经为我和其他一些stackoverflow用户(跨不同的操作系统和浏览器)崩溃了.

更新8:

@Capile能够重现在Mac OS X 10.9.1上运行的Safari 7.0.1中的崩溃问题.

更新9: 通过使用@Capile的代码,我能够<select>在Safari 5.1.10(在OSX 10.6.8上运行)中获得"uncollapse".请阅读他的答案以获取详细信息.我将在今天或明天晚些时候在Chrome和Firefox中测试他的代码.这真的很有希望,我想我们已经接近解决这个问题了.到目前为止,我再次感谢大家的帮助,你们真棒!

更新10: 我终于有机会在我的Snow Leopard(10.6.9)计算机上测试Chrome中的@Capile代码.这次<select>让我崩溃有点麻烦,但经过几分钟的尝试,它终于做到了.将他的代码粘贴到控制台后<select>"uncollapsed"(尽可能不优雅).这很奇怪,因为如果这个"崩溃"问题与系统级垃圾收集有关,那么人们会认为a <select>会在浏览器中相当一致地"崩溃",但事实并非如此.我已经测试了无数的浏览器(跨多个操作系统),并且<select>"崩溃"在某些浏览器(例如Safari)中似乎非常普遍......我当然不是专家程序员所以我可能错了,但无论如何,我只是想更新这个问题,以便更多的人可以考虑新的信息.

更新11: 我刚刚为这个问题添加了一笔赏金,试图产生更多的兴趣(我希望它有所帮助).无论如何,我昨晚能够<select>在最新版本的Firefox(在OSX 10.6.9上运行)中崩溃.遗憾的是我没有机会在Firefox中测试@Capile的代码,但我今天会尝试这样做.

Answer 1

Cap*_*ilé 9

由于<select> 元素UI由操作系统在几个浏览器中处理(这使得它们的完整样式变得更加复杂或者不可能),我猜这是操作系统级别的错误,或者浏览器中与某些操作系统UI相关的错误功能 - 绝对不是源HTML的问题,这很简单,并且根据规范).

对于浏览器,<select>元素是完全正常的:你可以在DOM看到它,甚至操纵它(它也会监听事件).如果您将其分离并重新连接到DOM,它将再次正常工作(打开并启用选择).如果你只是在控制台窗口运行下面的代码,你将再次使用它:

var s=document.getElementsByTagName('select'),
    i=s.length,
    a=document.createElement('div'),
    b;
while(i-->0) {
    s[i].parentNode.insertBefore(a, s[i]);
    b=s[i].parentNode.removeChild(s[i]);
    a.parentNode.insertBefore(b,a);
    a.parentNode.removeChild(a);
    b=null;
}

Run Code Online (Sandbox Code Playgroud)

我的猜测是,当浏览器模糊时,UI元素可能会被某种操作系统垃圾收集器捕获,当你回到浏览器时,它只是希望操作系统再次显示它(但它找不到它) ).但这只是一个猜测 - 我需要配置Safari内存才能真正实现它.

我可以在Mac OS X 10.9.1上运行的Safari 7.0.1上复制它,但无法在Firefox 28.0a2(Aurora)或Chrome 34(Canary)上复制它.

Answer 2

hkk*_*hkk 2

正如评论中提到的，这看起来像是滞后。无论是由计算机、浏览器、插件/扩展程序还是页面上的其他内容引起的，您都不能在 select 中放入 75 个选项并期望 Safari 和 IE 跟上。我不确定延迟是否会导致页面冻结并迫使用户重新加载它，但老实说，我不知道还有什么可能导致它。

我不太确定您在哪里需要 75 个选项的选择，但如果您确实需要它，我建议您使用简单的文本输入，将用户可以输入的内容限制为 1-75。是的，它并不像下拉选择那么简单和优雅，但它可以完成工作，而且您不必担心出现故障。

感谢您的答复。我见过很多（非常）长的下拉菜单，它们工作得非常完美（它们大多是“选择你的国家”下拉菜单）。我非常感谢你的建议，但即使有 4 或 5 个选项，这种下拉崩溃也是可能的（尽管，不可否认，这种情况不太常见）。我想弄清楚这件事的真相（如果可能的话）。再次感谢你提供的建议！ (4认同)

归档时间：	11 年，11 月前
查看次数：	3003 次
最近记录：	11 年，9 月前