Highlight Pada Kotak Formulir
Highlight, efek sorot ini dapat ditampilkan saat focus dalam element, dimana ketika kursor mengklik area tersebut, maka warna latar pun terpicu untuk berubah warna sesuai dengan warna yang telah ditentukan sebelumnya.
Demo: Lakukan focus pada kotak formulir berikut ini
Untuk mengimplementasikannya cukup mudah, sisipkan kode berikut ini pada setiap FORM:
onKeyUp="highlight(event)" onClick="highlight(event)" Contoh:
<FORM
onKeyUp="highlight(event)" onClick="highlight(event)">.............................
</FORM>
Sebelum memulainya, kita memerlukan kode berikut ini yang dapat kita letakan pada tag
<script language="JavaScript1.2">
//<![CDATA[
var highlightcolor=
var ns6=document.getElementById&&!document.all
var previous=''
var eventobj
//Regular expression to highlight only form elements
var intended=/INPUT|TEXTAREA|SELECT|OPTION/
//Function to check whether element clicked is form element
function checkel(which){
if (which.style&&intended.test(which.tagName)){
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode
return true
}
else
return false
}
//Function to highlight form element
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}
//]]>
</script>Untuk warna Highlight, lihat
"lightyellow" pada kode diatas, silahkan ganti dengan warna yang kita inginkan.Selain dengan menggunakan cara tersebut diatas, kita juga bisa dengan menggunakan cara yang lebih sederhana, yaitu dengan menggunakan
-Puesdo class form:focus,dimana kita cukup dengan menggunakan CSS2 puedo class :focus yang secara dinamis dapat juga memberikan warna Highlight pada element saat focus.Dan kita cukup dengan menggunakan CSS seperti berikut ini:
<style type="text/css">
input:focus { background-color: #FF0000}
textarea:focus { background-color: #FFFF00}
</style>Demo: Lakukan focus pada kotak formulir berikut ini
Jika kita ingin menggunakan gambar, sisipkan gambar seperti pada CSS berikut ini:
<style type="text/css">
input:focus { background-image: url(URL_Gambar)}
textarea:focus { background-image: url(URL_Gambar)}
</style>Demo: Lakukan focus pada kotak formulir berikut ini
Untuk mempelajari lebih lanjut tentang hal ini, silakan lihat halaman sumber, lihat juga Auto Highlight text disini.
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon