tab's in textarea

Auteur: haytjes - 09 oktober 2005 - 19:46 - Gekeurd door: nemesiskoen - Hits: 6769 - Aantal punten: 4.86 (11 stemmen)

Tab's gebruiken in een textarea

1. Inleiding

Ik vind het heel lastig dat je in een <textarea> geen tab's kan gebruiken, omdat tab betekent "naar het volgende veldje gaan".
Nu heb ik een Javascriptje geschreven die dat wel kan.

2. installatie

- je kopieert het scriptje hieronder en zet het in een bestandje tab.js
- je zet het bestandje in dezelfde map als de web-pagina
- je zet <script type="text/javascript" src="tab.js"></script> in de HEAD van je document
- je zet als attribute wysiwyg=true in je textarea
(<textarea wysiwyg=true></textarea>)

3. compatible

dit script werkt volledig in:

Citaat:

tabs:
IE 6.0, 5.0 (niet op mac)
tabs op meerdere lijnen
Opera 8.0 ('k krijg soms wel vierkantjes, maar door verder te typen gaan ze terug naar echt tabs)
tabs op meerdere lijnen + shift-tab
FF (normaal altijd)

in andere browsers gaat hij de tab aan het einde van het document zetten, omdat die browsers de positie van de cursor niet kunnen uitlezen.

4. Change log

todo
- als je meerdere lijnen selecteert, zet hij voor ze allemaal een tab (*IE)
- shift-tab om de tab's weg te doen (*IE)

1.2 beta:
- feature: als je meerdere lijnen selecteert, zet hij voor ze allemaal een tab (*Firefox&Opera8.0 only)
- feature: shift-tab om de tab's weg te doen (*Firefox only)
- bug solved: als je een tab gebruikt, vlieg je niet meer naar boven, als er een scrolbar is.

1.1:
- feature: aan en uit zetten
- feature: snelkoppeling key veranderen
- feature: checkbox voor het switchen tussen aan en uit

1.0:
- ...

Code:

tab.js

php code - Bekijk de code zonder highlighting - Klap code in

var a_u = true;
// true = standaard staat de tab's functie aan
// false = standaard staat de tab's functie uit

var a_u_key = 18;
// hier kan je de nummer ingeven van snelkoppeling om de tab's functie aan of uit te zetten
// momenteel staat hij op altGr
// als je dus deze knop + TAB inhoudt, kan je switchen tussen aan en uit.

var checkbox = true;
// true: er komt boven de textarea een knop om te switchen tussen aan en uit.
// false: er gebeurt niets.
var checkbox_text = "Gebruik tab's in de textarea. (shortcut = AltGr + TAB)";
// Hier zet je de text die na de checkbox moet komen.

//////////////////////////// versie 1.2: Tab's in een textarea //////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
//made by Haytjes //////////// http://www.alasal.be /////////////////////////////////////
var startPos = "";
var endPos = "";
var sel = "";
var altGr = false;
var input_id = "";
var shift = false;

window.onload = function()
{
	var oTextArea = document.getElementsByTagName("textarea");
	var y = oTextArea.length;
	for(var x=0;x<y;x++)
	{
		if(oTextArea.item(x).getAttribute("wysiwyg"))
		{
			if(checkbox)
			{
				var oDiv = document.createElement("DIV");
				var oInput=document.createElement("INPUT");
				var oTextNode = document.createTextNode(checkbox_text);
				oInput.type = "checkbox";
				oInput.onclick=function(){a_u = this.checked = !a_u;};
				oDiv.appendChild(oInput);
				oDiv.appendChild(oTextNode);
				input_id = oDiv.firstChild;
				oTextArea.item(x).parentNode.insertBefore(oDiv,oTextArea.item(x));
				oInput.checked = a_u;
			}
			oTextArea.item(x).onkeydown = position;
			oTextArea.item(x).onkeyup = function(e)
			{ 
				var key = (typeof e != 'undefined' && typeof e.which != 'undefined') ? e.which :
				(typeof e != 'undefined' && typeof e.keyCode != 'undefined') ? e.keyCode :
				(typeof window.event != 'undefined' && typeof event.keyCode != 'undefined') ? event.keyCode :
				null;
				if (key)
				{
					if(key == 16)
					{
						shift = false;
					}
				}
				return altGr = false;
			};
		}
	}
}; 
function position(e) 
{
	if (document.selection) 
	{
		this.focus();
		sel = document.selection.createRange();
	}
	if (this.selectionStart || this.selectionStart == '0') 
	{
		startPos = this.selectionStart;
		endPos = this.selectionEnd;
	}
	var key = (typeof e != 'undefined' && typeof e.which != 'undefined') ? e.which :
	(typeof e != 'undefined' && typeof e.keyCode != 'undefined') ? e.keyCode :
	(typeof window.event != 'undefined' && typeof event.keyCode != 'undefined') ? event.keyCode :
	null;
	if (key)
	{
		if (key == a_u_key)
		{
			altGr = true;
			return true;
		}
		if (key == 16)
		{
			shift = true;
			return true;
		}
		if (key == 9) 
		{
			if(altGr)
			{
				(a_u)?a_u=false:a_u=true;
				altGr = false;
				if(checkbox)
				{
					input_id.checked = a_u;
				}
				return false;
			}
			if(shift)
			{
				//shift = false;
				if(checkbox)
				{
					removeAtCursor(this);
				}
				return false;
			}
			if(a_u)
			{
				insertAtCursor(this);
				return false;
			}
		}
	}
}
function removeAtCursor(myField) 
{
	//MOZILLA/NETSCAPE support
	if (myField.selectionStart || myField.selectionStart == '0') 
	{
		var minEnd = 0;
		var minBegin = 0;
		replace = myField.value.substring(startPos,endPos);
			
		minEnd = replace.length+2;
		replace = replace.replace(/\n\t/g,"\n");
		first = myField.value.substring(0, startPos) + "1";
		lines = first.split("\n");
		line = lines[lines.length-1];
		lines[lines.length-1] = null;
		var len = line.length;
		if(len > 0)
		{
			line = line.replace(/^\t/,"");
			minBegin += len - line.length;
		}
		else
		{
			var len = replace.length;
			replace = replace.replace(/^\t/,"");
			minEnd += lin - replace.length
			
		}
		myField.value = lines.join("\n")+line.substr(0,line.length-1)+replace+myField.value.substring(endPos, myField.value.length);
		myField.selectionStart = startPos-minBegin;
		myField.selectionEnd = startPos-minBegin+replace.length;
	}
}
function insertAtCursor(myField) 
{
	//MOZILLA/NETSCAPE support
	if (myField.selectionStart || myField.selectionStart == '0') 
	{
		replace = myField.value.substring(startPos,endPos);
		var scroll = myField.scrollTop;
		if( replace.indexOf("\n") != -1)
		{
			replace = replace.replace(/\n/g,"\n\t");
			first = myField.value.substring(0, startPos)
			if(first.indexOf("\n") == -1)
				first = "\t"+first
			else
				first = first.replace(/\n(.*)$/,"\n\t$1")
			
			myField.value = first+replace+myField.value.substring(endPos, myField.value.length);
			myField.selectionStart = startPos+1;
			myField.selectionEnd = startPos+replace.length+1;
		}
		else
		{
			replace = "\t";	
			myField.value = myField.value.substring(0, startPos)+replace+myField.value.substring(endPos, myField.value.length);
			myField.selectionStart = startPos+replace.length;
			myField.selectionEnd = startPos+replace.length;
		}
		myField.scrollTop = scroll;
	}
	// IE support
	else if (document.selection) 
	{
		myField.focus();
		sel.text = "\t";
		sel.moveStart('character', 0);
		sel.select();
	}
	// if NOT supported
	else
	{
		myField.value += "\t";
	}
}

var a_u = true;
// true = standaard staat de tab's functie aan
// false = standaard staat de tab's functie uit
 
var a_u_key = 18;
// hier kan je de nummer ingeven van snelkoppeling om de tab's functie aan of uit te zetten
// momenteel staat hij op altGr
// als je dus deze knop + TAB inhoudt, kan je switchen tussen aan en uit.
 
var checkbox = true;
// true: er komt boven de textarea een knop om te switchen tussen aan en uit.
// false: er gebeurt niets.
var checkbox_text = "Gebruik tab's in de textarea. (shortcut = AltGr + TAB)";
// Hier zet je de text die na de checkbox moet komen.
 
//////////////////////////// versie 1.2: Tab's in een textarea //////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
//made by Haytjes //////////// http://www.alasal.be /////////////////////////////////////
var startPos = "";
var endPos = "";
var sel = "";
var altGr = false;
var input_id = "";
var shift = false;
 
window.onload = function()
{
	var oTextArea = document.getElementsByTagName("textarea");
	var y = oTextArea.length;
	for(var x=0;x<y;x++)
	{
		if(oTextArea.item(x).getAttribute("wysiwyg"))
		{
			if(checkbox)
			{
				var oDiv = document.createElement("DIV");
				var oInput=document.createElement("INPUT");
				var oTextNode = document.createTextNode(checkbox_text);
				oInput.type = "checkbox";
				oInput.onclick=function(){a_u = this.checked = !a_u;};
				oDiv.appendChild(oInput);
				oDiv.appendChild(oTextNode);
				input_id = oDiv.firstChild;
				oTextArea.item(x).parentNode.insertBefore(oDiv,oTextArea.item(x));
				oInput.checked = a_u;
			}
			oTextArea.item(x).onkeydown = position;
			oTextArea.item(x).onkeyup = function(e)
			{ 
				var key = (typeof e != 'undefined' && typeof e.which != 'undefined') ? e.which :
				(typeof e != 'undefined' && typeof e.keyCode != 'undefined') ? e.keyCode :
				(typeof window.event != 'undefined' && typeof event.keyCode != 'undefined') ? event.keyCode :
				null;
				if (key)
				{
					if(key == 16)
					{
						shift = false;
					}
				}
				return altGr = false;
			};
		}
	}
}; 
function position(e) 
{
	if (document.selection) 
	{
		this.focus();
		sel = document.selection.createRange();
	}
	if (this.selectionStart || this.selectionStart == '0') 
	{
		startPos = this.selectionStart;
		endPos = this.selectionEnd;
	}
	var key = (typeof e != 'undefined' && typeof e.which != 'undefined') ? e.which :
	(typeof e != 'undefined' && typeof e.keyCode != 'undefined') ? e.keyCode :
	(typeof window.event != 'undefined' && typeof event.keyCode != 'undefined') ? event.keyCode :
	null;
	if (key)
	{
		if (key == a_u_key)
		{
			altGr = true;
			return true;
		}
		if (key == 16)
		{
			shift = true;
			return true;
		}
		if (key == 9) 
		{
			if(altGr)
			{
				(a_u)?a_u=false:a_u=true;
				altGr = false;
				if(checkbox)
				{
					input_id.checked = a_u;
				}
				return false;
			}
			if(shift)
			{
				//shift = false;
				if(checkbox)
				{
					removeAtCursor(this);
				}
				return false;
			}
			if(a_u)
			{
				insertAtCursor(this);
				return false;
			}
		}
	}
}
function removeAtCursor(myField) 
{
	//MOZILLA/NETSCAPE support
	if (myField.selectionStart || myField.selectionStart == '0') 
	{
		var minEnd = 0;
		var minBegin = 0;
		replace = myField.value.substring(startPos,endPos);
 
		minEnd = replace.length+2;
		replace = replace.replace(/\n\t/g,"\n");
		first = myField.value.substring(0, startPos) + "1";
		lines = first.split("\n");
		line = lines[lines.length-1];
		lines[lines.length-1] = null;
		var len = line.length;
		if(len > 0)
		{
			line = line.replace(/^\t/,"");
			minBegin += len - line.length;
		}
		else
		{
			var len = replace.length;
			replace = replace.replace(/^\t/,"");
			minEnd += lin - replace.length
 
		}
		myField.value = lines.join("\n")+line.substr(0,line.length-1)+replace+myField.value.substring(endPos, myField.value.length);
		myField.selectionStart = startPos-minBegin;
		myField.selectionEnd = startPos-minBegin+replace.length;
	}
}
function insertAtCursor(myField) 
{
	//MOZILLA/NETSCAPE support
	if (myField.selectionStart || myField.selectionStart == '0') 
	{
		replace = myField.value.substring(startPos,endPos);
		var scroll = myField.scrollTop;
		if( replace.indexOf("\n") != -1)
		{
			replace = replace.replace(/\n/g,"\n\t");
			first = myField.value.substring(0, startPos)
			if(first.indexOf("\n") == -1)
				first = "\t"+first
			else
				first = first.replace(/\n(.*)$/,"\n\t$1")
 
			myField.value = first+replace+myField.value.substring(endPos, myField.value.length);
			myField.selectionStart = startPos+1;
			myField.selectionEnd = startPos+replace.length+1;
		}
		else
		{
			replace = "\t";	
			myField.value = myField.value.substring(0, startPos)+replace+myField.value.substring(endPos, myField.value.length);
			myField.selectionStart = startPos+replace.length;
			myField.selectionEnd = startPos+replace.length;
		}
		myField.scrollTop = scroll;
	}
	// IE support
	else if (document.selection) 
	{
		myField.focus();
		sel.text = "\t";
		sel.moveStart('character', 0);
		sel.select();
	}
	// if NOT supported
	else
	{
		myField.value += "\t";
	}
}

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (16)