tab's in textarea (via greasemonkey)

Auteur: haytjes - 19 januari 2006 - 22:33 - Gekeurd door: nemesiskoen - Hits: 3913 - Aantal punten: (0 stemmen)

Tab's gebruiken in een textarea (via greasemonkey)

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.
(dit is een aangepaste versie van dit)

2. Greasemonkey???

Greasemonkey is een extension voor Firefox, waardoor je JavaScript op gelijk welke site kan uitvoeren, zonder dat andere mensen dit weten/hinder door ondervinden. Deze extensie voegt dus locaal JavaScript toe. Dit kan handig zijn om bv. googleX of google suggest op alle google paginas te hebben. En dit stelt mij instaat om te zorgen dat dit scriptje ALLE textarea's een tab-functie geeft.

meer info:
http://en.wikipedia.org/wiki/Greasemonkey
http://greasemonkey.mozdev.org/

3. installatie

- je zorgt dat je greasemonkey hebt geïnstalleerd
- je ga naar het http://www.alasal.be/sitemasters/tab.users.js en ga naar Tools->Install This User Script.

Code:

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

// ==UserScript==
// @name          tabs
// @namespace     http://www.alasal.be
// @description   this adds tabs on textareas
// @include       *
// ==/UserScript==

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

window.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.

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

//////////////////////////// versie 1.1: Tab's in een textarea //////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
//made by Haytjes //////////// http://www.alasal.be /////////////////////////////////////

window.startPos = "";
window.endPos = "";
window.sel = "";
window.altGr = false;
window.input_id = "";

window.position = function(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 == 9) 
		{
			if(altGr)
			{
				(a_u)?a_u=false:a_u=true;
				altGr = false;
				if(checkbox)
					input_id.checked = a_u;
				return false;
			}
			if(a_u)
			{
				insertAtCursor(this,"\t");
				e.preventDefault();
			}
		}
	}
};
window.insertAtCursor = function(myField, myValue) 
{
	//IE support
	if (document.selection) 
	{
		myField.focus();
		sel.text = myValue;
		sel.moveStart('character', 0);
		sel.select();
	}
	//MOZILLA/NETSCAPE support
	else if (myField.selectionStart || myField.selectionStart == '0') 
	{
		myField.value = myField.value.substring(0, startPos)
							 + myValue
							 + myField.value.substring(endPos, myField.value.length);
		myField.selectionStart = startPos+myValue.length;
		myField.selectionEnd = startPos+myValue.length;
	} 
	else
	{
		myField.value += myValue;
	}
};


window.start = 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.checked = a_u;
				oInput.addEventListener('click', function(event){a_u = event.target.checked = !a_u;}, true);
				oDiv.appendChild(oInput);
				oDiv.appendChild(oTextNode);
				input_id = oDiv.firstChild;
				oTextArea.item(x).parentNode.insertBefore(oDiv,oTextArea.item(x));
			}
			oTextArea.item(x).addEventListener('keydown', position, true);
			oTextArea.item(x).addEventListener('keyup'  , function(){ return altGr = false;}, true);
		}
	}
};
start();

// ==UserScript==
// @name          tabs
// @namespace     http://www.alasal.be
// @description   this adds tabs on textareas
// @include       *
// ==/UserScript==
 
window.a_u = true;
// true = standaard staat de tab's functie aan
// false = standaard staat de tab's functie uit
 
window.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.
 
window.checkbox = false;
// true: er komt boven de textarea een knop om te switchen tussen aan en uit.
// false: er gebeurt niets.
window.checkbox_text = "Gebruik tab's in de textarea. (shortcut = AltGr + TAB)";
// Hier zet je de text die na de checkbox moet komen.
 
//////////////////////////// versie 1.1: Tab's in een textarea //////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
//made by Haytjes //////////// http://www.alasal.be /////////////////////////////////////
 
window.startPos = "";
window.endPos = "";
window.sel = "";
window.altGr = false;
window.input_id = "";
 
window.position = function(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 == 9) 
		{
			if(altGr)
			{
				(a_u)?a_u=false:a_u=true;
				altGr = false;
				if(checkbox)
					input_id.checked = a_u;
				return false;
			}
			if(a_u)
			{
				insertAtCursor(this,"\t");
				e.preventDefault();
			}
		}
	}
};
window.insertAtCursor = function(myField, myValue) 
{
	//IE support
	if (document.selection) 
	{
		myField.focus();
		sel.text = myValue;
		sel.moveStart('character', 0);
		sel.select();
	}
	//MOZILLA/NETSCAPE support
	else if (myField.selectionStart || myField.selectionStart == '0') 
	{
		myField.value = myField.value.substring(0, startPos)
							 + myValue
							 + myField.value.substring(endPos, myField.value.length);
		myField.selectionStart = startPos+myValue.length;
		myField.selectionEnd = startPos+myValue.length;
	} 
	else
	{
		myField.value += myValue;
	}
};
 
 
window.start = 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.checked = a_u;
				oInput.addEventListener('click', function(event){a_u = event.target.checked = !a_u;}, true);
				oDiv.appendChild(oInput);
				oDiv.appendChild(oTextNode);
				input_id = oDiv.firstChild;
				oTextArea.item(x).parentNode.insertBefore(oDiv,oTextArea.item(x));
			}
			oTextArea.item(x).addEventListener('keydown', position, true);
			oTextArea.item(x).addEventListener('keyup'  , function(){ return altGr = false;}, true);
		}
	}
};
start();

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (3)