Phiên bản đầy đủ: jsB@nk » Ứng dụng » Nhập liệu trên trang web
URL: https://www.javascriptbank.com/document-keypress-script.html
Hiệu ứng tạo một vùng nhập liệu dành cho người truy cập ngay trên trang web.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Nhập liệu trên trang web
URL: https://www.javascriptbank.com/document-keypress-script.html
<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 ONLYvar fontcolor='#00436e'; // FONT COLORvar fontsize=30; // FONT SIZEvar 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 ! " # $ % & \' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ 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('_',' ');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 HALLfunction 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-->