[JS] Krijg focus niet terug op textarea

[Reveller]

Ik ben bezig met een simpele editor a la GoT. Hieronder staat hoever ik nu ben. In regel 36 staat txtarea.focus(). Ik dacht dat ik hiermee de focus weer op de textarea zou krijgen, zodat de gebruiker meteen door kan tikken. Dat is alleen niet zo. Wie ziet het probleem? Ik heb ook al de txtarea.focus() in de onlick van de buttons gezet, maar ook dat levert geen resultaat op.

HTML:

<script language="JavaScript" type="text/javascript">

function initEditor()
{
  txtarea = document.getElementById('editor');
}

// Nu nog copy-paste GoT - pas nog aan uiteraard :)
function mozWrap(type)
{
  var sStart = txtarea.selectionStart;
  var sEnd = txtarea.selectionEnd;
  text = txtarea.value.substring(sStart, sEnd);
  text = txt_replace(type, text);
  txtarea.value = txtarea.value.substr(0, sStart) + text + txtarea.value.substr(sEnd);
  var nEnd = sStart + text.length;
  txtarea.setSelectionRange(nStart, nEnd);
}

function IEWrap(type)
{
  text = document.selection.createRange().text;
  text = txt_replace(type,text)
  document.selection.createRange().text = text;
}

function wrapSelection(type)
{
  if (document.all)
  {
    IEWrap(type);
  }
  else if (document.getElementById)
  {
    mozWrap(type);
  }
  txtarea.focus();
}

function txt_replace(type, text)
{
  switch (type)
  {
    case 'p':
      text = '<p>'+text+'</p>';
      break;
    case 'bold':
      text = '<b>'+text+'</b>';
      break;
    case 'italic':
      text = '<i>'+text+'</i>';
      break;
    case 'h1':
      text = '<h1>'+text+'</h1>';
      break;
    case 'h2':
      text = '<h2>'+text+'</h2>';
      break;
    case 'h3':
      text = '<h3>'+text+'</h3>';
      break;
  }
  return text;
}

</script>

<input type="button" value=" B " onclick="wrapSelection('bold');">
<input type="button" value=" I " onclick="wrapSelection('italic');">
<select onchange="wrapSelection(this.options[this.options.selectedIndex].value); this.selectedIndex=0">
  <option selected>Heading</option>
  <option value='p'>Paragraph</option>
  <option value='h1'>H1</option>
  <option value='h2'>H2</option>
  <option value='h3'>H3</option>
</select>
<br>
<textarea id="editor" name="data[content]" rows="10" cols="50"></textarea>

<script type=text/javascript>initEditor();</script>

[ Voor 63% gewijzigd door Reveller op 25-04-2005 21:36 ]

[BtM909]

Wat is de waarde van txtarea

edit:

Ik mis trouwens nStart ergens (althans, wordt nergens gedeclareerd)

[ Voor 99% gewijzigd door BtM909 op 25-04-2005 21:31 ]

[Salandur]

txtarea bestaat helemaal niet! dan kan ie dus ook geen focus krijgen...

[faabman]

moet txtarea niet ergens worden gedeclareerd als global variabele??

[André]

Salandur schreef op maandag 25 april 2005 @ 21:31:
txtarea bestaat helemaal niet! dan kan ie dus ook geen focus krijgen...

code:

function initEditor()
{
  txtarea = document.getElementById('editor');
}

Oh

[BtM909]

Hmppffff, bij mij werkt het wel, alleen wordt de cursor niet naar 't einde verplaatst. Weet niet of dat nu je vraag is?
Never mind, bij mij werkt het na een aanpassing

Dus originele vraag blijft staan

[ Voor 31% gewijzigd door BtM909 op 25-04-2005 21:41 ]

[Reveller]

faabman schreef op maandag 25 april 2005 @ 21:34:
moet txtarea niet ergens worden gedeclareerd als global variabele??

Je hebt gelijk:

HTML:

<script language="JavaScript" type="text/javascript">
var txtarea = '';

function initEditor()
{
  txtarea = document.getElementById('editor');
}

BtM909 schreef op maandag 25 april 2005 @ 21:39:
Hmppffff, bij mij werkt het wel, alleen wordt de cursor niet naar 't einde verplaatst. Weet niet of dat nu je vraag is?

Dat is het probleem waar ik nu mee zit ja - bij mij werkt het nu ook, maar hoe krijg ik de cursor naar het einde van de regel? Ik ging er stiekem vanuit dat dat automatisch zou gaan met het terugzetten van de focus...

[ Voor 49% gewijzigd door Reveller op 25-04-2005 21:42 ]

[André]

Verander dit:

code:

txtarea.setSelectionRange(nStart, nEnd);

in

code:

txtarea.setSelectionRange(sStart, nEnd);

[Reveller]

André schreef op maandag 25 april 2005 @ 21:43:
Verander dit:

code:

txtarea.setSelectionRange(nStart, nEnd);

in

code:

txtarea.setSelectionRange(sStart, nEnd);

Had ik intussen al gedaan - de mozWrap functie is voorlopig een kopie van GoT totdat ik hem herschreven heb:

Java:

function mozWrap(type)
{
  var sStart = txtarea.selectionStart;
  var sEnd = txtarea.selectionEnd;
  text = txtarea.value.substring(sStart, sEnd);
  text = txt_replace(type, text);
  txtarea.value = txtarea.value.substr(0, sStart) + text + txtarea.value.substr(sEnd);
  var nStart = (sStart == sEnd) ? sStart + text.length : sStart;
  var nEnd = sStart + text.length;
  txtarea.setSelectionRange(nStart, nEnd);
}

Nog steeds de vraag: weet iemand hoe ik, naast de focus terug op de tekstarea te zetten, de cursor aan het einde van de regel kan krijgen (nu verschijnt er nog geen cursor)?

[ Voor 11% gewijzigd door Reveller op 25-04-2005 22:14 ]

[crisp]

zorgen dat de nieuwe selectie die je maakt het einde van de inhoud van je textarea is.

[Reveller]

crisp schreef op maandag 25 april 2005 @ 23:20:
zorgen dat de nieuwe selectie die je maakt het einde van de inhoud van je textarea is.

Dat snap ik niet. Stel, iemand heeft de volgende textarea:

code:

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua.

De gebruiker selecteert "consectetur adipisicing elit," en klikt op de button om deze selectie bold te maken. Dan lijkt het mij logisch dat als de focus teruggezet wordt op de textarea, de cursor ( | ) aan het einde van de ge-edite selectie verschijnt en niet standaard aan het einde van de tekst. De gebruiker zou misschien nog meer bewerkingen op die specifieke plek willen doen:

code:

Lorem ipsum dolor sit amet, 
<b>consectetur adipisicing elit,</b>|
sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua.

Ik hoop dat mijn vraag duidelijk is: ondanks dat ik de focus op de textarea zet met (txtarea.focus(()), verschijnt er geen cursor in de textarea. Je moet er eerst nog eens in klikken en dat niet gebruikersvriendelijk. Hoe zorg ik ervoor dat er, met het zetten van de focus, ook een cursor verschijnt achter de laatst ge-editoe regel?

[BtM909]

Alstu

http://www.codebase.nl/index.php/command/viewcode/id/189

trouwens van onze eigen crisp

[Reveller]

Had ik via oude topics ook al gevonden, maar die pagina geeft een error:

Fatal error: Call to undefined function: gzcompress() in /www/www.codebase.nl/public_html/modules/gzdoc.php on line 24

[BtM909]

Kan je een email sturen met een mirror

Maar heb geen gegevens van je

[BtM909]

Wacht doe het zo wel:

JavaScript:

// GNU copyright (C) 2003 crisp - freesoftware(at)xs4all.nl

var prompttext = new Array();
prompttext['img'] = 'Voer url van afbeelding in';
prompttext['b'] = 'Voer text in om vet te maken';
prompttext['i'] = 'Voer text in om cursief te maken';
prompttext['s'] = 'Voer text in om door te strepen';
prompttext['u'] = 'Voer tekst in om te onderstrepen';
prompttext['li'] = 'Voer opsommings item in';
prompttext['url'] = 'Voer url in';
prompttext['url='] = 'Voer url in';
prompttext['urld'] = 'Voer omschrijving van url in';
prompttext['mail'] = 'Voer email adres in';

var target = null;
function getTarget(el) {

  target = (document.getElementById)? document.getElementById(el):0;

}

function storeCursor(el) {

  if (document.all && el.createTextRange) el.cursorPos = document.selection.createRange().duplicate();

}

function putStr(text) {

  if (target) {

    if (document.all && target.cursorPos) {

      target.cursorPos.text = text;

    } else if (typeof(target.selectionStart) != 'undefined') {

      var sStart = target.selectionStart;
      var sEnd = target.selectionEnd;
      target.value = target.value.substr(0, sStart) + text + target.value.substr(sEnd, target.value.length);
      target.selectionStart = (sStart == sEnd)? sStart + text.length:sStart;
      target.selectionEnd = sStart + text.length;

    } else {

      target.value += text;

    }

    target.focus();
    storeCursor(target);

  }

}

function applyUBB(style) {

  if (target) {

    var selectedtext = '';
    if (document.all && target.cursorPos) {
      selectedtext = target.cursorPos.text;
    } else if (typeof(target.selectionStart) != 'undefined') {
      selectedtext = target.value.substr(target.selectionStart, target.selectionEnd - target.selectionStart);
    }

    if (!selectedtext) selectedtext = prompt(prompttext[style], '');
    if (!selectedtext) { target.focus(); return; }

    if (style == 'url=') {
      var description = prompt(prompttext['urld'], '');
      if (!description) { target.focus(); return; }
      selectedtext = '[url='+selectedtext+']'+description+'[/url]';
    } else {
      selectedtext = '['+style+']'+selectedtext+'[/'+style+']';
    }

    putStr(selectedtext);

  }

}

Enige verschil is dat crisp hier de locatie opslaat van de cursor. Die kan je dus naar 't einde verplaatsen.

[ Voor 12% gewijzigd door BtM909 op 26-04-2005 10:33 ]

[Reveller]

Dank je Ik had al een gelijkesoortig stukje code gezien in de GoT editor (zelfde auteur misschien ) maar snapte ook toen 1 ding niet: de storeCursor functie wordt bij GoT veelvuldig gebruikt (zie source javascriptje) maar ook bij deze editor verschijnt de cursor niet terug in de textarea nadat je bv. op het "bold" knopje geklikt hebt. Aan het feit dat er op het moment dat je klikt een geselecteerde regel in de textarea veschijnt, kun je zien dat de focus gerestored is. Maar er verschijnt nog geen cursor. Ideeen, iemand? Dank overiges voor de moeite BtM909!

[crisp]

Ik denk dat het niet verschijnen van de cursor terwijl de focus toch op de textarea staat gewoon een Firefox bugje is. Heb je al eens geprobeert om toch gewoon iets te typen?

[Reveller]

crisp schreef op dinsdag 26 april 2005 @ 17:59:
Ik denk dat het niet verschijnen van de cursor terwijl de focus toch op de textarea staat gewoon een Firefox bugje is. Heb je al eens geprobeert om toch gewoon iets te typen?

Het is geen bugje van FF - IE vertoont hetzelfde gedrag. Voor de duidelijkheid hieronder een voorbeeld met de GoT editor:



In de bovenste rij plaatjes typ ik een zin. Ik selecteer deze zin en klik op de "Bold" knop. Het resultaat staat in het derde plaatje: de focus is weliswaar op de textarea terug, maar als ik nu iets zou typen, wis ik de string [ b]Dit is een test[/b]. Ik moet dus eerst in de textarea klikken voor ik verder kan typen. IE vertoont eenzelfde gedrag: de tekst is na de herstelde focus weliswaar niet blauw gekleurd, maar blijkt toch geselecteerd te zijn, want als daarna iets tik, verdwijnt, net als bij FF de [ b]Dit is een test[/b] string.

In de onderste twee plaatjes zie je de werking van de editor als je zonder iets te selecteren, op de "Bold" knop klikt: in dit geval verschijnt [ b][/b], met daarachter een cursor, zoals het hoort Ook de werking hiervan is gelijk in IE en FF. Ik zie niet waar hem het verschil in zit. In beide gevallen wordt (bij GoT) het target.focus() commando gegeven...

[ Voor 6% gewijzigd door Reveller op 26-04-2005 20:32 . Reden: typo's + layout ]

[crisp]

voor wat betreft Firefox is het makkelijk op te lossen:

JavaScript:

txtarea.setSelectionRange(nEnd, nEnd);

Dat hele IE-selection gebeuren met textRanges is nogal abracadabra voor mij; niet de meest logische implementatie in ieder geval.
Dat we hier op GoT de selectie behouden is by design; stel dat je en bold en italic wilt dan hoef je niet opnieuw een selectie te maken.

[Reveller]

crisp schreef op woensdag 27 april 2005 @ 01:54:
voor wat betreft Firefox is het makkelijk op te lossen:

JavaScript:

txtarea.setSelectionRange(nEnd, nEnd);

Dat werkt idd perfect, dank je

Dat hele IE-selection gebeuren met textRanges is nogal abracadabra voor mij; niet de meest logische implementatie in ieder geval.

Het bizarre is dat als je geen selectie maakt, maar bv. alleen een smiley invoert of op de "bold" knop klikt zonder iets te selecteren, de cursor ook in IE wel terug gezet wordt in de textarea. Op de een of andere manier behoudt IE de geselecteerde tekst. Ik heb vele sites afgezocht naar een oplossing voor dit probleem, maar vraag mij zo langzamerhand af of het wel op te lossen is. Heeft iemand hier toevallig ervaring mee?