« »

This script allows you to type directly on the document without the use of text boxes. I'm not sure how useful this is, but it's kinda neat.

Label: Document KeyPress script

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
HTML
Print

Copy All x2

<script language="javascript">
// "TYPETEXT.JS"  - v1.0
//  Author: Brian Gosselin
//
//  Known "Bugs":
//  TO BACKSPACE:
//  NN4+ : USE THE BACKSPACE KEY ONLY
//  NN6   : USE THE BACKSPACE OR THE ESCAPE KEY
//  IE4+  : USE THE BACKSPACE OR ESCAPE KEY
//  IE5+  : USE THE ESCAPE KEY ONLY

var fontcolor='#00436e';        // FONT COLOR
var fontsize=30;                // FONT SIZE
var maxchars=104;           // MAX NUMBER OF ALLOWED CHARACTERS TO "TYPE" INCLUDING SPACES.
var wrapafterchar=25;       // INSERTS A NEWLINE AFTER N CHARACTERS. SET TO 0 TO DISABLE WRAP.
                                          // EACH LINE WRAP TAKES UP 1 CHARACTER IN maxchars VARIABLE.

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

var typearea;
var keys="bk bk 0 0 0 0 0 0 bk 0 0 0 0 bk 0 0 0 0 0 0 0 0 0 0 0 0 0 bk 0 0 0 0 &nbsp; ! &quot; # $ % &amp; \' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \\ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~".split(' ');
var mykeys=new Array(1);
var ctr=0;
var cursor=new Array('_','&nbsp;&nbsp;');

function backspace(){
if(mykeys.length!=1){
var tmparry=new Array();
for(i=0;i<mykeys.length-1;i++)tmparry[i]=mykeys[i];
mykeys=new Array();
for(i=0;i<tmparry.length;i++)mykeys[i]=tmparry[i];
}}

function catchkey(evt){
var ai=(ie4||ie5)?window.event.keyCode:evt.which;
if(keys[ai]=='bk')backspace();
else{
if((mykeys.length<=maxchars) && (keys[ai]!=null)){
mykeys[mykeys.length]=keys[ai];
var p=getlastelempos('<br>', mykeys);
if(p==null)p=0;
if((wrapafterchar!=0) && ((mykeys.length-1-p)==wrapafterchar))mykeys[mykeys.length]='<br>';
}}
writelayer(typearea, '<font style=" color:'+fontcolor+'; font-size:'+fontsize+'px;">'+mykeys.join('')+cursor[ctr]+'</font>');
}

function flashcursor(){
ctr=(ctr>=1)? 0 : ctr+1;
writelayer(typearea, '<font style=" color:'+fontcolor+'; font-size:'+fontsize+'px;">'+mykeys.join('')+cursor[ctr]+'</font>');
}

function getlastelempos(element,array){
var pos=null;
for(i=array.length-1;i>0;i--){
if(array[i]==element){
pos=i;
break;
}}
return pos;
}

function getid(id){
if(ns4) return findlayer(id,document);
else if(ie4)return document.all[id];
else return document.getElementById(id);
}

// FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALL
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)if((layer=findlayer(name,layer.document))!=null)return layer;
}
return null;
}

function writelayer(id,text){
if(ns4){
id.document.open();
id.document.write('<div style="position:absolute; left:0px; top:0px;">'+text+'</div>');
id.document.close();
}else id.innerHTML=text;
}

function init(){
typearea=getid('typearea');
if(ns4 || ns6) document.captureEvents(Event.KEYPRESS);
document.onkeypress=catchkey;
if(ns6)alert('Since you are using NS6, you must click somewhere on the document\nfirst before typing.');
setInterval('flashcursor()', 500);
}

window.onload=function(){
setTimeout('init()',500);
}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)',400);
}

var t='<table cellpadding="0" cellspacing="0" border="0"><tr><td  valign="top" height="'+(maxchars/wrapafterchar*fontsize*1.5)+'">';
t+=(ns4)? '<ilayer name="typearea"></ilayer>':'<div id="typearea" style="position:relative;"></div>';
t+='</td></tr></table>';
document.write(t);
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->