login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Formulieren > tab's in textarea

tab's in textarea

Auteur: haytjes - 09 oktober 2005 - 19:46 - Gekeurd door: nemesiskoen - Hits: 6981 - 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
  1. var a_u = true;
  2. // true = standaard staat de tab's functie aan
  3. // false = standaard staat de tab's functie uit
  4.  
  5. var a_u_key = 18;
  6. // hier kan je de nummer ingeven van snelkoppeling om de tab's functie aan of uit te zetten
  7. // momenteel staat hij op altGr
  8. // als je dus deze knop + TAB inhoudt, kan je switchen tussen aan en uit.
  9.  
  10. var checkbox = true;
  11. // true: er komt boven de textarea een knop om te switchen tussen aan en uit.
  12. // false: er gebeurt niets.
  13. var checkbox_text = "Gebruik tab's in de textarea. (shortcut = AltGr + TAB)";
  14. // Hier zet je de text die na de checkbox moet komen.
  15.  
  16. //////////////////////////// versie 1.2: Tab's in een textarea //////////////////////////
  17. /////////////////////////////////////////////////////////////////////////////////////////
  18. //made by Haytjes //////////// http://www.alasal.be /////////////////////////////////////
  19. var startPos = "";
  20. var endPos = "";
  21. var sel = "";
  22. var altGr = false;
  23. var input_id = "";
  24. var shift = false;
  25.  
  26. window.onload = function()
  27. {
  28. var oTextArea = document.getElementsByTagName("textarea");
  29. var y = oTextArea.length;
  30. for(var x=0;x<y;x++)
  31. {
  32. if(oTextArea.item(x).getAttribute("wysiwyg"))
  33. {
  34. if(checkbox)
  35. {
  36. var oDiv = document.createElement("DIV");
  37. var oInput=document.createElement("INPUT");
  38. var oTextNode = document.createTextNode(checkbox_text);
  39. oInput.type = "checkbox";
  40. oInput.onclick=function(){a_u = this.checked = !a_u;};
  41. oDiv.appendChild(oInput);
  42. oDiv.appendChild(oTextNode);
  43. input_id = oDiv.firstChild;
  44. oTextArea.item(x).parentNode.insertBefore(oDiv,oTextArea.item(x));
  45. oInput.checked = a_u;
  46. }
  47. oTextArea.item(x).onkeydown = position;
  48. oTextArea.item(x).onkeyup = function(e)
  49. {
  50. var key = (typeof e != 'undefined' && typeof e.which != 'undefined') ? e.which :
  51. (typeof e != 'undefined' && typeof e.keyCode != 'undefined') ? e.keyCode :
  52. (typeof window.event != 'undefined' && typeof event.keyCode != 'undefined') ? event.keyCode :
  53. null;
  54. if (key)
  55. {
  56. if(key == 16)
  57. {
  58. shift = false;
  59. }
  60. }
  61. return altGr = false;
  62. };
  63. }
  64. }
  65. };
  66. function position(e)
  67. {
  68. if (document.selection)
  69. {
  70. this.focus();
  71. sel = document.selection.createRange();
  72. }
  73. if (this.selectionStart || this.selectionStart == '0')
  74. {
  75. startPos = this.selectionStart;
  76. endPos = this.selectionEnd;
  77. }
  78. var key = (typeof e != 'undefined' && typeof e.which != 'undefined') ? e.which :
  79. (typeof e != 'undefined' && typeof e.keyCode != 'undefined') ? e.keyCode :
  80. (typeof window.event != 'undefined' && typeof event.keyCode != 'undefined') ? event.keyCode :
  81. null;
  82. if (key)
  83. {
  84. if (key == a_u_key)
  85. {
  86. altGr = true;
  87. return true;
  88. }
  89. if (key == 16)
  90. {
  91. shift = true;
  92. return true;
  93. }
  94. if (key == 9)
  95. {
  96. if(altGr)
  97. {
  98. (a_u)?a_u=false:a_u=true;
  99. altGr = false;
  100. if(checkbox)
  101. {
  102. input_id.checked = a_u;
  103. }
  104. return false;
  105. }
  106. if(shift)
  107. {
  108. //shift = false;
  109. if(checkbox)
  110. {
  111. removeAtCursor(this);
  112. }
  113. return false;
  114. }
  115. if(a_u)
  116. {
  117. insertAtCursor(this);
  118. return false;
  119. }
  120. }
  121. }
  122. }
  123. function removeAtCursor(myField)
  124. {
  125. //MOZILLA/NETSCAPE support
  126. if (myField.selectionStart || myField.selectionStart == '0')
  127. {
  128. var minEnd = 0;
  129. var minBegin = 0;
  130. replace = myField.value.substring(startPos,endPos);
  131.  
  132. minEnd = replace.length+2;
  133. replace = replace.replace(/\n\t/g,"\n");
  134. first = myField.value.substring(0, startPos) + "1";
  135. lines = first.split("\n");
  136. line = lines[lines.length-1];
  137. lines[lines.length-1] = null;
  138. var len = line.length;
  139. if(len > 0)
  140. {
  141. line = line.replace(/^\t/,"");
  142. minBegin += len - line.length;
  143. }
  144. else
  145. {
  146. var len = replace.length;
  147. replace = replace.replace(/^\t/,"");
  148. minEnd += lin - replace.length
  149.  
  150. }
  151. myField.value = lines.join("\n")+line.substr(0,line.length-1)+replace+myField.value.substring(endPos, myField.value.length);
  152. myField.selectionStart = startPos-minBegin;
  153. myField.selectionEnd = startPos-minBegin+replace.length;
  154. }
  155. }
  156. function insertAtCursor(myField)
  157. {
  158. //MOZILLA/NETSCAPE support
  159. if (myField.selectionStart || myField.selectionStart == '0')
  160. {
  161. replace = myField.value.substring(startPos,endPos);
  162. var scroll = myField.scrollTop;
  163. if( replace.indexOf("\n") != -1)
  164. {
  165. replace = replace.replace(/\n/g,"\n\t");
  166. first = myField.value.substring(0, startPos)
  167. if(first.indexOf("\n") == -1)
  168. first = "\t"+first
  169. else
  170. first = first.replace(/\n(.*)$/,"\n\t$1")
  171.  
  172. myField.value = first+replace+myField.value.substring(endPos, myField.value.length);
  173. myField.selectionStart = startPos+1;
  174. myField.selectionEnd = startPos+replace.length+1;
  175. }
  176. else
  177. {
  178. replace = "\t";
  179. myField.value = myField.value.substring(0, startPos)+replace+myField.value.substring(endPos, myField.value.length);
  180. myField.selectionStart = startPos+replace.length;
  181. myField.selectionEnd = startPos+replace.length;
  182. }
  183. myField.scrollTop = scroll;
  184. }
  185. // IE support
  186. else if (document.selection)
  187. {
  188. myField.focus();
  189. sel.text = "\t";
  190. sel.moveStart('character', 0);
  191. sel.select();
  192. }
  193. // if NOT supported
  194. else
  195. {
  196. myField.value += "\t";
  197. }
  198. }
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

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