网站搜索字段不起作用 - Chrome答案

【问题标题】：Website search field not working - Chrome网站搜索字段不起作用 - Chrome
【发布时间】：2015-02-11 18:22:35
【问题描述】：

所以今天引起了我的注意，我们的网站搜索字段在 chrome 中不起作用...我无法单击并在文本字段中输入文本，也无法单击搜索图标来启动搜索...

抱歉，我不知道造成这种情况的具体原因，也没有开发这种情况。我们的一位很久以前离开的开发人员做到了。我现在负责解决这个问题。

FireFox 和 IE 11 似乎运行良好。

非常感谢任何见解。

      <div class="searchbox" id="searchbox"> 
        <script type="text/javascript"> 
              function RunSearch() { 
                    window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value; 
              } 
        </script> 
              <div class="formSrchr"> 
                    <input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
                    <input type="hidden" name="qlOld" id="qlOld" value="" /> 
                    <input type="hidden" name="colOld" id="colOld" value="web1" /> 
                    <input type="image" name="imageField" alt="search" src="/_images/search-mag.gif" onclick="RunSearch();" /> 
              </div> 
  </div> <!-- /searchbox -->

【问题讨论】：

哇。那不是好的代码……我不能肯定，但 Chrome 有一个习惯，就是让无效的 HTML 不起作用。没有表单标签，这可能是你的问题。
归功于最晦涩和奇怪的搜索功能！ One of our developers who left quite some time ago did.希望他转行！

标签： html google-chrome

【解决方案1】：

这是一个糟糕的代码，我建议整个重写.. 至于快速修复..

您可以尝试以下方法：

var searchTerm = document.getElementById("search").value;
location.assign("http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + searchTerm );

或者

function RunSearch() { 
                    window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value; 
                    return false;    
              }

但是不要用这个..重写它！

【讨论】：

【解决方案2】：

我的建议是在 chrome 中打开开发者工具并查看 Javascript 调试窗口。这应该告诉你在更一般的情况下发生了什么。无论哪种情况，我都建议像这样重写 sn-p：

<div class="searchbox" id="searchbox">
  <div class="formSrchr">
    <form action="http://search.domain.com:8765/query.html" method="get">
      <input type="text" size="20" name="qt" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" onmouseup="return false" />
      <input type="hidden" name="ql" id="ql" value="" />
      <input type="hidden" name="col" id="col" value="web1" />
      <input type="image" alt="search" src="/_images/search-mag.gif" />
    </form>
  </div>
</div>

标准表单元素的行为方式与不使用 JavaScript 时的行为方式相同。就像以前一样，所有命名的输入都将作为 URL 参数添加。这就是method="get" 所做的。对于大多数表单，默认的method="post 是最好的；但是，对于搜索，您并没有真正发布任何内容。有一些奇怪的代理服务器会禁用所有 HTTP POST 调用，以防止该代理背后的人意外共享他们不应该共享的信息。 method="get" 至少允许这些人搜索您的网站。

注意：基于一些搜索，Chrome 需要您disable the onmouseup event 才能使焦点和模糊效果按预期工作。我上面的 HTML 表单已经为您进行了更改。

在 HTML 5 中，您可以使用 placeholder 标记进一步简化它。它看起来像这样：

<input type="text" size="20" name="qt" placeholder="Search" value=""/>

这会从您的搜索表单中删除所有 Javascript。

【讨论】：