ตย. ฟอร์มเช็คคำแล้วเปลี่ยนสีตามที่ต้องการ Change color of specific words in textarea
หลักการทำงานคือ เรากำหนดคำที่ต้องการเช็คใน textarea เมื่อตรงกับคำที่เราต้องการก็ให้เปลี่ยนเป็นสีตามที่เราต้องการครับ ใช้ javasctript เข้ามาช่วย
ตย. คำที่เอามาเช็ค(ได้ทั้งภาษาไทยและอังกฤษนะครับ)
มาดูตัวอย่างจาก code เลยละกันครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<html> <head> <style> #editor { width: 400px; height: 100px; padding: 10px; background-color: green; color: white; font-size: 18px; font-family: monospace; } .statement { color: red; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="editor" contenteditable="true"></div> <script> $("#editor").on("keydown keyup", function(e){ if (e.keyCode == 32){ var text = $(this).text().replace(/[\s]+/g, " ").trim(); var word = text.split(" "); var newHTML = ""; $.each(word, function(index, value){ switch(value.toUpperCase()){ case "รัก": case "ชอบ": case "ทำเว็บ": case "LIKE": case "BABY": case "ส้มโอ": case "มะพร้าว": case "น้ำหอม": case "ทุเรียน": case "หน้ากาก": case "devbanban": newHTML += "<span class='statement'>" + value + " </span>"; break; default: newHTML += "<span class='other'>" + value + " </span>"; } }); $(this).html(newHTML); //// Set cursor postion to end of text var child = $(this).children(); var range = document.createRange(); var sel = window.getSelection(); range.setStart(child[child.length - 1], 1); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); $(this)[0].focus(); } }); </script> </body> </html> <!-- ref : https://stackoverflow.com/questions/37139076/change-color-of-specific-words-in-textarea --> |
ผลการทำงาน
ทดลองใช้งานคลิก.. ทดลองใช้งาน
ref :
https://stackoverflow.com/questions/37139076/change-color-of-specific-words-in-textarea