Javascript Essentials Part 6


Form Effects

Form Field Highlight on Focus

Clicking form input field changes its background color.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">
var highlightcolor="#cccccc"
var ns6=document.getElementById&&!document.all
var previous=''
var eventobj
var intended=/INPUT|TEXTAREA|SELECT|OPTION/
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 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></head>
<body><form>
<p><input type="text" name="textfield" onKeyUp="highlight(event)" onClick="highlight(event)"></p>
<p><input type="text" name="textfield2" onKeyUp="highlight(event)" onClick="highlight(event)"></p>
<p><textarea name="textarea" cols="40" rows="5" onKeyUp="highlight(event)" onClick="highlight(event)"></textarea></p></form></body></html>
Form Field Select

Following script will enable you to click select form field data.

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="Javascript">
<!--
/*
Select and Copy form element script- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
//specify whether contents should be auto copied to clipboard (memory)
//Applies only to IE 4+
//0=no, 1=yes
var copytoclip=1
function HighlightAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
if (document.all&&copytoclip==1){
therange=tempval.createTextRange()
therange.execCommand("Copy")
window.status="Contents highlighted and copied to clipboard!"
setTimeout("window.status=''",1800)
}
}
//-->
</script>
</head>
<body>
<form name="sampleform1">
<a href="javascript:HighlightAll('sampleform1.kw')">Select All</a><br>
<textarea name="kw" id="johndoe" cols=55 rows=10></textarea>
</form></body></html>
Form Field Counter

Count and restrict input characters in form field.

<html><head>
<script type=text/javascript>
var ns6=document.getElementById&&!document.all
function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}
function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}
function displaylimit2(thename, theid, thelimit){
var theform=theid!=""? document.getElementById(theid) : thename
var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining on your input limit'
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true); 
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true); 
}
}
</script>
</head>
<body>
<form name=sampleform>
<textarea id=johndoe4 name=tt cols=55></textarea>
<br>
<script>displaylimit2("document.sampleform.johndoe4","",80)</script>
<form>
</body>
</html>
Data Appears or Disappears on Click and Focus Out in Form Input Field
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<form>
<p>
<input name="textfield" type="text" onFocus="if(this.value=='Select Me')this.value='';" value="Select Me">
</p>
<p>
<input name="textfield2" type="text" onFocus="if(this.value=='Click Here')this.value='';" onBlur="if(this.value=='')this.value='Click Here'" value="Click Here">
</p>
<p>
<input type="reset" name="Reset" value="Reset">
</p>
</form>
</body>
</html>

Download Form Effects and Controls

Related Posts


1 thought on “Javascript Essentials Part 6

Leave a Reply

Your email address will not be published. Required fields are marked *