Question

我的网站上有一个搜索框下拉菜单。麻烦的是，当您键入一个以上单词的搜索词时，由于引导程序可访问性脚本认为用户正在尝试使用该空间进行导航，因此它关闭了下拉列表。我的问题是双重的：

如何防止其跳出搜索框？

如果我这样做，它仍然可以访问，如果不能访问，则有建议吗？

谢谢。小提琴在这里：https://jsfiddle.net/aq9Laaew/184048/

    <ul>
  <li class="dropdown hidden-xs"><a href="https://dev.craftonhills.edu/faculty-and-staff/index.php#" class="dropdown-toggle search-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Search</a>
    <ul class="search-dropdown-menu dropdown-menu" role="menu">
      <li>
        <div id="ctl01_Google_Custom_Search">
          <div id="search-form"> 
            <!--<gcse:searchbox-only></gcse:searchbox-only>-->
            <form action="https://www.craftonhills.edu/utilities/search.php" class="searchform" id="cse-search-box">
              <input name="cx" type="hidden" value="002089989202594896610:obysh2a6sbs">
              <input name="ie" type="hidden" value="UTF-8">
              <label for="q" class="sr-only">Search Box</label>
              <span class="gsc-input">
              <input class="search-box" id="q" name="q" onfocus="document.getElementById(&#39;q&#39;).value=&#39;&#39;" type="text" placeholder="" title="Google Custom Search" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255); text-indent: 0px;">
              </span>
              <input type="submit" class="search-button gsc-search-button" value="Go">
              <input name="siteurl" type="hidden" value="dev.craftonhills.edu/faculty-and-staff/index.php">
              <input name="ref" type="hidden" value="dev.craftonhills.edu/prospective-students/index.php">
              <input name="ss" type="hidden" value="">
              <input name="siteurl" type="hidden" value="dev.craftonhills.edu/faculty-and-staff/index.php">
              <input name="ref" type="hidden" value="dev.craftonhills.edu/prospective-students/index.php">
              <input name="ss" type="hidden" value="">
            </form>
            <script type="text/javascript" src="./search_files/f.txt"></script> 
          </div>
        </div>
      </li>
    </ul>
  </li>
</ul>

Answer 1

尝试在自定义jquery中使用类似的内容：

$('input#q').keydown(function(e) {

        // alert (e.keyCode);

    if (e.keyCode == 32) {
        e.stopPropagation();
    }
});

我认为它可以工作，但是我不是JavaScript专业人士。

B.t.w。我在您的示例中使用链接的js代码对其进行了测试，我可以输入多个单词和空格。但是我不是专业人士，所以也许会与某些东西发生冲突，但这是一个解决方法：）

使用引导程序可访问性脚本在空间上关闭搜索drowdown

1 个答案: