<button type =「submit」>不工作在FireFox

這是一個非常奇怪的錯誤，我似乎無法弄清楚。我試圖複製http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/的可擴展搜索<button type =「submit」>不工作在FireFox

我幾乎完成了它，除了一個惱人的錯誤。它在FireFox中完全沒有。在Chrome，IE和Edge中，當我點擊小搜索圖標時，搜索會展開，然後我可以輸入內容並提交。

但是，當我將鼠標懸停在FireFox的搜索圖標上時，絕對沒有任何反應。我的光標甚至沒有改變，告訴我它是可點擊的。

有很多代碼，所有這些，我沒有任何經驗的Javascript，這是我想象是造成這個問題。

值得注意的是，我將它與我的wordpress網站和wordpress搜索結合起來。正如我前面所說，除了FireFox之外，它在我測試過的所有瀏覽器中都能很好地工作。

這是我已經包含在我的wordpress導航菜單中的HTML：

<li id="sb-search" class="sb-search"> 
    <form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/"> 
      <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" /> 
      <button type="submit" form="searchform" formmethod="get" ><i class="fa fa-search"></i></button> 
    </form> 
</li>'

這是我已經包含在我的WordPress網站的標題中的javascript：

<script> 
    $(document).ready(function() { 
     new UISearch(document.getElementById('sb-search')); 
    }); 
</script>

這裏是與使它工作相關的三個javascript文件：

classie.js - http://pastebin.com/Wk5nXfkV

modernizr.custom.js - http://pastebin.com/5A7NXWLV

uisearch.js - http://pastebin.com/bQc4XkEd

還有很多CSS與樣式隨之而來的，但我無法想象那是問題所在。但是如果有人想要CSS，那就讓我知道，我會更新這篇文章。

來源

2015-08-17 Quiver

今天早上花了2個小時在網上搜索這個神祕的問題的答案後，我能夠弄清楚這一點。

我碰到this article.

我向下滾動至底部，並完美地工作對我來說什麼，他說，更新（07月 - 2013年）之後的事。我不得不改變一些我的風格，但除此之外，它的工作完美無瑕。

這是對我工作的摘錄：

正如一些評論所提到的，我的推薦結果在一個空元素。起初我並不太在意，但隨着我越來越多地思考，我的純粹主義者有點不安。是的，在理想的世界中，您應該能夠移除所有的JavaScript和CSS，並且頁面仍然有意義。在這種情況下，您將留下一個沒有任何描述性文字的按鈕。這讓我的胃部變得模糊不清，我回到了繪圖板上，試圖找到一種方法在元素內部顯示文本，而不會將其隱藏在屏幕外。一些修修補補後，這裏就是我想出了：

<style> 
.btn-label { 
font-size: 0; 
height: 1px; 
overflow: hidden; 
display: block; 
} 
</style> 

<button class="icon-envelope"><span class="btn-label">Email</span></button>

的想法是有描述性文字<button>元素的內部，同時將字體真棒類的<button>本身。這使您可以與<button>分開修改內部<span>元素。 <span>設置爲幾乎不可見，通過使用0的字體大小，一個像素的高度（使VoiceOver開心）。其餘用於確保<span>永遠不會變大。

在本文中提到的所有瀏覽器和屏幕閱讀器中，使用此模式宣告文本「電子郵件按鈕」。解決辦法是讓我的純粹一面非常舒適。您不會通過移動文本而忽略它的命運，但<button>元素仍然包含文本。在這種情況下，您不必使用ARIA爲屏幕閱讀器提供其他上下文。

- Source

所以我的新代碼是：

<li id="sb-search" class="sb-search"> 
    <form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/"> 
      <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" /> 
      <button type="submit" aria-label="Submit" class="fa fa-search"><span class="btn-label">Submit</span></button> 
    </form> 
</li>

來源

2015-08-18 17:33:37 Quiver

<button type =「submit」>不工作在FireFox

回答

相關問題