- Home Page
- > Script DHTML
- > Script DHTML Forms
- > Highlight
Highlight
Highlights the fields when they get the focus
<script language="JavaScript1.2">
var highlightcolor="yellow"
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>
Prova a cliccare con il mouse sugli elementi del form
<br>
<FORM onkeyup=highlight(event) onclick=highlight(event)>
Campo 1:<INPUT size=25><BR>
Campo 2: <TEXTAREA name=S1 rows=5 cols=31></TEXTAREA>
<BR>
Campo 3:<INPUT type=checkbox><INPUT type=checkbox></SELECT>
<BR>
<INPUT type=button value="Form button">
</FORM>
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.
