ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery
เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdeeข้อความ hilight ค้นหา ่jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ hilight ค้นหา ่jquery
ไปที่
Copy
ตัวอย่าง
สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery - สร้างฟังก์ชัน กรอกข้อความได้เฉพาะภาษาไทยด้วย javascript
ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย - สร้างคลิกขวาเมนูในเว็บด้วย CSS + jQuery อย่างง่ายดาย
การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery - สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google
เพิ่มลูกเล่นให้กับป้ายโฆษณาตรึงขอบล่าง ด้วย jQuery - การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง
CSS Code
<style type="text/css"> .higlight{ background-color:#FFFF33; color:#333333; } </style>
HTML Code
<input name="keyword" type="text" id="keyword" size="25" /> <input name="iFind" type="button" id="iFind" value="Find" /> <p>สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery - สร้างฟังก์ชัน กรอกข้อความได้เฉพาะภาษาไทยด้วย javascript<br /> ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย - สร้างคลิกขวาเมนูในเว็บด้วย CSS + jQuery อย่างง่ายดาย<br /> การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery - สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google<br /> เพิ่มลูกเล่นให้กับป้ายโฆษณาตรึงขอบล่าง ด้วย jQuery - การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง<br /> </p>
Javascript Code
<script language="javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript"> $(function(){ $("#iFind").click(function(){ $(".higlight").removeClass(); iHilight($("#keyword").val()); }); }); var SearchRange; function iHilight(str){ if(str!=""){ if(SearchRange == null) { SearchRange = document.body.createTextRange(); } if(SearchRange.findText(str) != false ) { SearchRange.pasteHTML("<span class='higlight'>"+SearchRange.text+"</span>"); SearchRange.scrollIntoView(); SearchRange.moveStart("word"); iHilight(str); }else{ SearchRange = null; } } } </script>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()