Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

javascript: insert text onclick

None
19 antwoorden
  • Dit is wat ik wil:

    ik heb een textarea, met daaronder afbeeldingen van smileys. Nu is de bedoeling, dat als ik op een smiley click, hij automatisch het acroniem in de tekstarea invoert..

    Dus;

    [code:1:b283696955]
    <a href="???"><img src="/afbeeldingen/emoticons/knipoog.gif" height="16" width="16" alt="Klik hier om deze emoticon in te voegen." /></a>[/code:1:b283696955]

    Maar, wat moet er nou op de plaats van de [b:b283696955]???[/b:b283696955] staan..
    Ik heb nog nooit in JavaScript geprogrammeert, maar heb al een paar boeken gelezen. Ik ben erachter gekomen dat ik het met eventHandlers zou moeten doen, maar nergens op internet iets bruikbaars kunnen vinden..

    Jullie zijn mijn laatste hoop.. Ik hoop dat jullie mij wel kunnen helpen!
  • [code:1:5d1ec63c26]
    <img src="/afbeeldingen/emoticons/knipoog.gif" height="16" width="16" alt="Klik hier om deze emoticon in te voegen." onclick="document.getElementById('test').value+=this.src;" />
    [/code:1:5d1ec63c26]
    test=id van je textarea

    De achor tag heb je niet nodig. Als je een handje wil, zet dan als style attribuut erbij: cursor:hand;cursor:pointer;

    edit:
    O ja, gebruik ipv het alt attribuut liever het title attribuut als je een tooltip voor het plaatje wil.
  • [quote:13ec86afd0]test=id van je textarea[/quote:13ec86afd0]
    id is dus de naam van mijn tekstarea??? Bedoel je dat?

    [quote:13ec86afd0]De achor tag heb je niet nodig. Als je een handje wil, zet dan als style attribuut erbij: cursor:hand;cursor:pointer;[/quote:13ec86afd0]
    Misschien ook een stomme vraag, maar wat is een '[i:13ec86afd0]achor[/i:13ec86afd0]'
  • de anchor tag:
    <a href enzo… raad eens waar de a voor staat ;)

    En in het voorbeeld van hulpje is "test" de naam/id van je textarea.

    [code:1:df55772fa8]
    <textarea name="test" id="test"></textarea>
    [/code:1:df55772fa8]

    t.
  • [quote:71f16bcdf9="Stefan Nagtegaal"]id is dus de naam van mijn tekstarea?[/quote:71f16bcdf9]Ja.
    [quote:71f16bcdf9]Misschien ook een stomme vraag, maar wat is een '[i:71f16bcdf9]achor[/i:71f16bcdf9]'[/quote:71f16bcdf9]Een [b:71f16bcdf9]anchor[/b:71f16bcdf9] is een link, vandaar de tag [i:71f16bcdf9]<a></a>[/i:71f16bcdf9].

    Edit: Argh! Teacher is me weer eens te snel af! :D

    - Bas
  • :lol: mwuahahahaha…
  • [quote:1ffc3c7d1c]<img src="/afbeeldingen/emoticons/knipoog.gif" height="16" width="16" alt="Klik hier om deze emoticon in te voegen." onclick="document.getElementById('test').value+=this.src;" /> [/quote:1ffc3c7d1c]

    Ehm tja, alvast bedankt voor de hulp, maar dit is niet echt wat ik wil…
    Wanneer ik op de emoticon klik, moet hij ';-)' in de textarea (of welk veld dan ook) invoegen, en niet <img src="bron.gif" height="hoogte" weight="breedte" title="alt-tekst" />

    k ben nu een beetje aan t klooien, en heb nu t volgende werkende, maar op een heel andere manier als jullie dit zouden doen..

    [code:1:1ffc3c7d1c]
    </head>
    <script language="JavaScript" media="screen" type="text/javascript" />
    <!–
    function addEmoticon(text2transform) {
    document.forms[0].elements[0].value += ''+text2transform+'';
    document.forms[0].elements[0].focus();
    }
    //–>
    </script>
    <form name="…">
    <div class="textarea">
    <textarea name="…" cols="60" rows="10" wrap="virtual"></textarea><br />
    <span class="emoticons-bar">
    <a href="javascript:void(0);" onClick="addEmoticon(':)')" onmouseover="top.window.status='Emoticon invoegen.'; return true" onmouseout="top.window.status=''; return true"><img src="/emoticons/lol.gif" alt="Emoticon invoegen." width="15" height="15" border="0"></a>
    <a href="javascript:void(0);" onClick="addEmoticon(':(')" onmouseover="top.window.status='Emoticon invoegen.'; return true" onmouseout="top.window.status=''; return true"><img src="/emoticons/verdrietig.gif" alt="Emoticon invoegen." width="15" height="15" border="0"></a>
    <a href="javascript:void(0);" onClick="addEmoticon(':p')" onmouseover="top.window.status='Emoticon invoegen.'; return true" onmouseout="top.window.status=''; return true"><img src="/emoticons/spotten.gif" title="Emoticon invoegen." width="15" height="15" border="0"></a>
    </span>
    </div>
    </form>
    </body>
    [/code:1:1ffc3c7d1c]

    Heeft er iemand een methode die beter is als deze?
    Wat is het voordeel t.o.v. jullie methodes?
    Wat is precies het verschil dan, en waarom?
  • Dat is bijna hetzelfde, je hebt er alleen een hoop extra zooi bijgehaald, waar ik persoonlijk geen behoefte aan zou hebben. Maar in essentie is het hetzelfde.

    Ik zou ongeveer zoiets doen:
    [code:1:681661872b]
    <style type="text/css">
    #emoticonsbar img {
    cursor:hand;cursor:pointer;
    border:0px;
    }
    </style>
    <span id="emoticonsbar">
    <img src="/emoticons/verdrietig.gif" title="Emoticon verdrietig invoegen" width="15" height="15" alt=":(">
    </span>
    <script type=text/javascript>
    var x=document.getElementById('emoticonsbar');
    var y=document.getElementsByTagName('img');
    for (var i=0;i<y.length;i++){
    y[i].onclick=addEmoticon();
    }
    function addEmoticon() {
    document.forms[0].elements[0].value += this.alt;
    document.forms[0].elements[0].focus();
    }
    </script>
    [/code:1:681661872b]
    Het stijlblok moet in je head.
  • Het spijt me hulpje, maar wat ik ook doe, het werkt gewoon [b:ca02aafe0e]niet[/b:ca02aafe0e]!

    Kun je eens de gehele source (icl. textarea end) van je HTML-pagina hier posten? Misschien dat k m er dan in z'n geheel vanaf kan halen en testen.. Maar nu doet ie echt helemaal niets anders dan errors spuugen… :-(
  • Ja, sorry. Ik heb de neiging om ter plekke code te maken zonder te testen.
    Er zat dus een klein foutje in de vorige code.
    Dit is een voorbeeld die wel zou moeten werken.
    [code:1:c802efbb55]
    <html><head>
    <title>Untitled</title>
    <style type="text/css">
    #emoticonsbar img {
    cursor:hand;cursor:pointer;
    border:0px;
    }
    </style>
    </head>
    <body>
    <form action="">
    <textarea rows="10" cols=""></textarea>
    </form>
    <span id="emoticonsbar">
    <img src="/emoticons/verdrietig.gif" title="Emoticon verdrietig invoegen" width="15" height="15" alt=":(">
    </span>
    <script type=text/javascript>
    var x=document.getElementById('emoticonsbar');
    var y=document.getElementsByTagName('img');
    for (var i=0;i<y.length;i++){
    y[i].onclick=addEmoticon;
    }
    function addEmoticon() {
    document.forms[0].elements[0].value += this.alt;

    }
    </script>
    </body>
    </html>
    [/code:1:c802efbb55]
    Ik vind het zelf wat betere code, omdat ik de stijl, script en de html-code van elkaar scheidt. Bovendien hoef je alleen maar een img-tag met een alt-attribuut toe te voegen voor nog een smiley.
  • Maar mijn probleem is, dat (volgens mij) jou code enkel maar bij 1 textarea werkt.. Stel ik heb 3 textarea's respectievelijk met de id/naam edit[teaser], edit[body], edit[comment].. Dan zouden deze toch terug moeten komen in jouw JavaScript?
  • Dat klopt, maar ik wist niet dat je meerdere textarea's wou gaan gebruiken.

    Er zit trouwens nog een stom foutje in de voorgaande code:
    var y=document.getElementsByTagName('img');
    moet worden veranderd in:
    var y=x.getElementsByTagName('img');

    In feite is het niet zo moeilijk om het voor meerdere textareas te laten gelden.
    Gevruik ipv een id emoticonsbar classes van emoticonsbar en gooi nog een extra loop om die ene loop (een die alle classes van emoticonsbar langsloopt, die array zul je ook nog moeten aanmaken)
    Voorlopig geen tijd om het zelf te doen, kun je zelf nog even oefenen :wink:
  • [quote:7d24226bf9]In feite is het niet zo moeilijk om het voor meerdere textareas te laten gelden. [/quote:7d24226bf9]
    Dat is mooi dan… :D

    [quote:7d24226bf9]Gevruik ipv een id emoticonsbar classes van emoticonsbar en gooi nog een extra loop om die ene loop (een die alle classes van emoticonsbar langsloopt, die array zul je ook nog moeten aanmaken)[/quote:7d24226bf9]
    Ehm…. Dit is echt abacadabra voor mij… Ik heb begrepen uit 1 of ander lullig beginners JavaScriptboekje, dat je met onFocus de focus op je textarea's zou kunnen triggeren? Of snap ik er nu echt niets van??? :cry:
  • [code:1:a2153c515b]
    <html><head>
    <title>Untitled</title>
    <style type="text/css">
    .emoticonsbar img {
    cursor:pointer;cursor:hand;
    border:0px;
    }
    </style>
    </head>
    <body>
    <form action="">
    <div class="emoticonsbar">
    <textarea rows="10" cols="40"></textarea>
    <img src="/emoticons/verdrietig.gif" title="Emoticon verdrietig invoegen" alt=" :( ">
    </div>
    <div class="emoticonsbar">
    <textarea rows="10" cols="40"></textarea>
    <img src="/emoticons/verdrietig.gif" title="Emoticon verdrietig invoegen" alt=" :) ">
    <img src="/emoticons/wink.gif" title="Emoticon wink invoegen" alt=" :wink: ">
    </div>
    </form>

    <script type=text/javascript>
    if (typeof Array.prototype.push=='undefined') {
    Array.prototype.push = function() {
    var currentLength = this.length;
    for (var i = 0; i < arguments.length; i++) {
    this[currentLength + i] = arguments[i];
    }
    return this.length;
    };
    }
    var emoties=document.getElementsByTagName('*');
    var temp,tempy;
    var emotierij=new Array();
    if (document.all)emoties=document.all;
    for (var i=0,temp=emoties.length;i<temp;i++){
    switch (emoties[i].className)
    {
    case 'emoticonsbar':emotierij.push(emoties[i]);break;
    default:break;
    }}

    for (i=0;i<emotierij.length;i++){
    var y=emotierij[i].getElementsByTagName('img');
    for (var j=0,tempy=y.length;j<tempy;j++){
    y[j].onclick=addEmoticon;
    }
    }
    function addEmoticon() {
    var tempt=this.parentNode;
    while(tempt.className!='emoticonsbar'){

    if (tempt.parentNode=null)break;
    tempt=tempt.parentNode;
    }
    var tempt2= tempt.getElementsByTagName('textarea')[0];
    tempt2.value += this.alt;
    tempt2.focus();
    }
    </script>
    </body>
    </html>
    [/code:1:a2153c515b]
    Hier is die dan. Het was allemaal toch nog wat rottiger, maar nu werkt die wel.
    In principe kun je nu zoveel textarea's toevoegen als je maar wil.
    Het moet wel altijd de volgende structuur hebben:
    [code:1:a2153c515b]
    div class="emoticonsbar
    textarea
    img alt="tekst die wil invoegen"
    evt nog meer img tags.
    [/code:1:a2153c515b]
  • Moet ik dan in de '<img … />' geen onClick="javascript:addEmoticon(';-)')" ofziets dergelijks invoegen dan?

    Als k dit in mijn php module plak, werkt ie niet…

    Dus bijvoorbeeld:

    [code:1:acd3c6334f]
    <textarea rows="10" cols="40"></textarea>
    <img src="/emoticons/verdrietig.gif" title="Emoticon verdrietig invoegen" alt=" :) " onClick="javascript:addEmoticon(':'-(')">
    </div>
    [/code:1:acd3c6334f]
  • [quote:d93a47a617="Stefan Nagtegaal"]Moet ik dan in de '<img … />' geen onClick="javascript:addEmoticon(';-)')" ofziets dergelijks invoegen dan?

    Als k dit in mijn php module plak, werkt ie niet…

    Dus bijvoorbeeld:

    [code:1:d93a47a617]
    <textarea rows="10" cols="40"></textarea>
    <img src="/emoticons/verdrietig.gif" title="Emoticon verdrietig invoegen" alt=" :) " onClick="javascript:addEmoticon(':'-(')">
    </div>
    [/code:1:d93a47a617][/quote:d93a47a617]
    Nee, dat moet je absoluut niet doen. De code die ik je gegeven heb, die werkt op zichzelf.
    Het stuk javascript moet na je html-code, doe hem maar net voor de sluiting van de body.

    [code:1:d93a47a617]
    <div class="emoticonsbar">
    <textarea rows="10" cols="40"></textarea>
    <img src="/emoticons/verdrietig.gif" title="Emoticon verdrietig invoegen" alt=" :( ">
    </div>
    [/code:1:d93a47a617]
    Dit is gewoon de code die je kunt gebruiken. Je mag verder alles aanpassen, als je maar div class="emoticonsbar" aanhoudt een textarea houdt en je smiley-plaatjes. Geen onclick-eventhandlers toevoegen.
  • Aha, dus daar zat mijn fout! :D

    Het is helemaal geweldig! Hij werkt als een trein.. Onwijs bedankt hulpje…
  • is het ook mogelijk om de emoticon dan op de plaats waar de cursor staat in te voegen?
  • Jazeker, dat is iig mogelijk bij Mozilla en Internet Explorer.
    Het wordt iig hier toegepast:
    http://www.codebase.nl/index.php/command/viewcode/id/189
    Deze houdt netjes rekening met alle browsers.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.