login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Formulieren > tab's in textarea (via greasemonkey)

tab's in textarea (via greasemonkey)

Auteur: haytjes - 19 januari 2006 - 22:33 - Gekeurd door: nemesiskoen - Hits: 3915 - 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:
  1. // ==UserScript==
  2. // @name tabs
  3. // @namespace http://www.alasal.be
  4. // @description this adds tabs on textareas
  5. // @include *
  6. // ==/UserScript==
  7.  
  8. window.a_u = true;
  9. // true = standaard staat de tab's functie aan
  10. // false = standaard staat de tab's functie uit
  11.  
  12. window.a_u_key = 18;
  13. // hier kan je de nummer ingeven van snelkoppeling om de tab's functie aan of uit te zetten
  14. // momenteel staat hij op altGr
  15. // als je dus deze knop + TAB inhoudt, kan je switchen tussen aan en uit.
  16.  
  17. window.checkbox = false;
  18. // true: er komt boven de textarea een knop om te switchen tussen aan en uit.
  19. // false: er gebeurt niets.
  20. window.checkbox_text = "Gebruik tab's in de textarea. (shortcut = AltGr + TAB)";
  21. // Hier zet je de text die na de checkbox moet komen.
  22.  
  23. //////////////////////////// versie 1.1: Tab's in een textarea //////////////////////////
  24. /////////////////////////////////////////////////////////////////////////////////////////
  25. //made by Haytjes //////////// http://www.alasal.be /////////////////////////////////////
  26.  
  27. window.startPos = "";
  28. window.endPos = "";
  29. window.sel = "";
  30. window.altGr = false;
  31. window.input_id = "";
  32.  
  33. window.position = function(e)
  34. {
  35. if (document.selection)
  36. {
  37. this.focus();
  38. sel = document.selection.createRange();
  39. }
  40. if (this.selectionStart || this.selectionStart == '0')
  41. {
  42. startPos = this.selectionStart;
  43. endPos = this.selectionEnd;
  44. }
  45. var key = (typeof e != 'undefined' && typeof e.which != 'undefined') ? e.which :
  46. (typeof e != 'undefined' && typeof e.keyCode != 'undefined') ? e.keyCode :
  47. (typeof window.event != 'undefined' && typeof event.keyCode != 'undefined') ? event.keyCode :
  48. null;
  49. if (key)
  50. {
  51. if (key == a_u_key)
  52. {
  53. altGr = true;
  54. return true;
  55. }
  56. if (key == 9)
  57. {
  58. if(altGr)
  59. {
  60. (a_u)?a_u=false:a_u=true;
  61. altGr = false;
  62. if(checkbox)
  63. input_id.checked = a_u;
  64. return false;
  65. }
  66. if(a_u)
  67. {
  68. insertAtCursor(this,"\t");
  69. e.preventDefault();
  70. }
  71. }
  72. }
  73. };
  74. window.insertAtCursor = function(myField, myValue)
  75. {
  76. //IE support
  77. if (document.selection)
  78. {
  79. myField.focus();
  80. sel.text = myValue;
  81. sel.moveStart('character', 0);
  82. sel.select();
  83. }
  84. //MOZILLA/NETSCAPE support
  85. else if (myField.selectionStart || myField.selectionStart == '0')
  86. {
  87. myField.value = myField.value.substring(0, startPos)
  88. + myValue
  89. + myField.value.substring(endPos, myField.value.length);
  90. myField.selectionStart = startPos+myValue.length;
  91. myField.selectionEnd = startPos+myValue.length;
  92. }
  93. else
  94. {
  95. myField.value += myValue;
  96. }
  97. };
  98.  
  99.  
  100. window.start = function()
  101. {
  102. var oTextArea = document.getElementsByTagName("textarea");
  103. var y = oTextArea.length;
  104. for(var x=0;x<y;x++)
  105. {
  106. if(!oTextArea.item(x).getAttribute("wysiwyg"))
  107. {
  108. if(checkbox)
  109. {
  110. var oDiv = document.createElement("DIV");
  111. var oInput=document.createElement("INPUT");
  112. var oTextNode = document.createTextNode(checkbox_text);
  113. oInput.type = "checkbox";
  114. oInput.checked = a_u;
  115. oInput.addEventListener('click', function(event){a_u = event.target.checked = !a_u;}, true);
  116. oDiv.appendChild(oInput);
  117. oDiv.appendChild(oTextNode);
  118. input_id = oDiv.firstChild;
  119. oTextArea.item(x).parentNode.insertBefore(oDiv,oTextArea.item(x));
  120. }
  121. oTextArea.item(x).addEventListener('keydown', position, true);
  122. oTextArea.item(x).addEventListener('keyup' , function(){ return altGr = false;}, true);
  123. }
  124. }
  125. };
  126. start();
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (3)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.039s