解決網(wǎng)頁搜索框無法使用手機輸入法中的“搜索”按鈕的問題

編輯：狂族晨曦 來源：WordPress技巧 日期：2017-07-05 閱讀： 8,763 次 8 條評論 » 百度已收錄

先森之前就發(fā)現(xiàn)，“成航先森”在手機上訪問使用搜索時，無法使用鍵盤上的“前往/搜索”按鈕。點擊沒有反應(yīng)，必須要點擊網(wǎng)頁中的搜索按鈕才行。之前因為懶得管，就一直沒有解決這個問題，這兩天丑了點時間研究了一下，最后發(fā)現(xiàn)這個問題是分階段的。

“前往”和“搜索”按鈕的問題

手機中的輸入框，有時候右下角是“前往”，而有時候是“搜索”。先森起初以為是因為先森的搜索框顯示的是“前往”，所以無法使用這個按鈕。后來先森發(fā)現(xiàn)，寫一個簡單的html頁面，通過手機訪問，無論是“前往”還是“搜索”，都不會影響點擊該按鈕的效果。

不過讓鍵盤顯示“搜索”還是要顯得專業(yè)一些。實現(xiàn)方法：

<input type="search">

搜索框的type必須是search。

“前往”與“搜索”

點擊輸入法中的“搜索”沒有反應(yīng)的原因

上面所說的，按鍵上無論顯示什么文字，都不會影響功能。然而先森的網(wǎng)站中，點輸入法上的按鈕是死活沒有作用，所以原因還是要繼續(xù)找。

先森本以為是某個JS代碼導(dǎo)致了這個問題，所以先森把首頁保存到本地，一個個的刪除嘗試。花費了大概一個小時的時間，終于，先森確認跟JS代碼沒有任何關(guān)系。

最后無意間刪了一個<base>標(biāo)簽，結(jié)果發(fā)現(xiàn)竟然可以了，手機輸入法點擊“搜索”可以搜索了。

罪魁禍?zhǔn)拙褪撬?/p>

<base target="_blank">

這個base標(biāo)簽的作用是網(wǎng)頁中的每個鏈接都默認為新標(biāo)簽頁打開，好不好用就不做累述了。

刪除與恢復(fù)

刪除這個<base>標(biāo)簽就可以實現(xiàn)使用手機輸入法中的搜索按鈕效果，但是我們想要的新標(biāo)簽頁打開網(wǎng)頁就沒有了。

先森參考網(wǎng)上的JavaScript腳本，新寫了一段js代碼，從而實現(xiàn)相類似的效果。需要注意的是，不能簡單的給每個<a>標(biāo)簽都增加上新標(biāo)簽頁打開，因為有些地方不適合新標(biāo)簽頁打開，比如頁碼，每點一次下一頁就新開一個窗口，訪客要瘋了吧？

所以，當(dāng)<a>標(biāo)簽已經(jīng)設(shè)置了本頁打開的需要排除，其他<a>標(biāo)簽才加上_blank屬性。

把下面的JavaScript代碼放在head某處：

<script type="text/javascript">
$(function(){
    $('body a').each(function(){
        if($(this).attr('target')!=='_self'){
        $(this).attr('target','_blank');}
    });
});
</script>

那么，你的網(wǎng)站搜索框能用手機的搜索按鈕嗎？

歷史上的今天:

• 2016:  如何用3個月毀掉你的室友？——致即將步入大學(xué)的準(zhǔn)大學(xué)生們(14)
• 2015:  2015毛概期末考試重點勾畫部分整理(0)