Javascript 搜尋頁面關鍵字 document.execCommand

利用Javascript的getSelection()搜尋頁面裡的字串,再用document.execCommand()標注出來,就可以完成一個簡易的頁面搜尋功能了。
keyword-js

HTML部份:

輸入關鍵字查詢
<input type="text" size=8 id="search">
<input type="button" id="button" onclick="doSearch($('#search').val())" value="查詢">
<p>自從RWD開始被推展之後,大家都一窩蜂什麼都要做成RWD</p>
<p>這一篇就先來說說缺點吧~</p>
<ul>
<li><span style="color: #ff6600;">所有的載具都讀取同⼀份網⾴,⼿機或平板效能⽐較差的載具,會有讀取速度較慢的問題</span></li>
</ul>
<p>RWD網頁最大的優點就是不管在什麼載具,都是讀取同一份html檔,但也就是因為這樣,不同的載具效能不同,就會呈現不同的效果,如果網頁是需要很多特效的話,那就只能盼望使用者的載具(手機、平板)都可以有像電腦一樣的硬體等級了。</p>
<ul>
<li><span style="color: #ff6600;">內容影響整體閱讀,不適合過於複雜的排版與內容</span></li>
</ul>
<p>RWD網頁在設計時通常還是會針對手機版做比較特比的規劃,畢竟手機的螢幕大小有限,比較不適合把所有東西都塞在一個頁面裡呈現。</p>
<ul>
<li><span style="color: #ff6600;">舊瀏覽器⽀援度⽐較差 (ex : IE7 IE8 IE9)</span></li>
</ul>
<p>只能說IE真是所有網頁開發人員的痛阿…真希望它趕快跟上腳步,或乾脆放棄了吧~</p>
<ul>
<li><span style="color: #ff6600;">開發時間與成本比傳統方式多</span></li>
</ul>
<p>RWD網頁是在後續維護比較省時間(因為只要更新一份html),但開發可就不是這麼一回事,在製作過程需要一直比對各載具的相容性(版面、效能),所以開發時間可不是兩個平台就兩倍時間這麼簡單的事情。</p>

Javascript部份:

function doSearch(text) {
	var isfound=0;
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
		sel.collapseToEnd();
		isfound=0;
        while (window.find(text)) {
            $("#button").blur();
            document.execCommand("HiliteColor", false, "aquamarine");
            sel.collapseToEnd();
			isfound=1;
        }
 		if (isfound == 0) {
			alert('cant find');
		}
       document.designMode = "off";
    }
}

以下結果預覽
fin

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *