[JS] Tekst direct kopieeren naar ander element - Softwareontwikkeling

donderdag 20 januari 2005 16:33

Acties:

Vrolijkheid alom!

Topicstarter

Volgens mij heeft nog nooit iemand dit willen doen om de een of andere reden, want ik kan er niets over vinden. Misschien dat m'n benaming niet helemaal gelukkig is gekozen... maar goed, help.

Wat is probeer te bereiken is dat ik in een text veld iets kan tikken, waarbij die tekst per direct (dus per letter) wordt overgenomen in een element er onder. In eerste instantie wil ik eigenlijk dat dat tweede element geen tekstveld is, aangezien dat de suggestie zou wekken dat je het kunt veranderen, wat niet het geval is. Wat ik daarvoor in de plaats kan gebruiken ben ik ook nog niet uit.

Het gaat me echter op dit moment eerst om het direct kopieeren, de layout kan ik altijd nog helemaal induiken. Met javascript heb ik echter nog niets gevonden wat me hierbij kan helpen. Iets als een onUpdate of onChange dacht ik aan, maar die lijken niet te bestaan.

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

donderdag 20 januari 2005 16:37

Acties:

BtM909

Watch out Guys...

onchange bestaat gewoon hoor

Maar je kan beter naar de onkeyup kijken en met bijvoorbeeld innerHTML of innerText de waarde wijzigen van een ander element.

HTML:

1 2	<input type="text" onkeyup="doIt(this.value)"> <div id="BtM909"></div>

JavaScript:

1
2
3

function doIt(elValue){
  document.getElementById('BtM909').innerText = elValue;
}

edit:

Het schijnt sneller te zijn om het via de nodes te doen, maar dit werkt iig

[ Voor 33% gewijzigd door BtM909 op 20-01-2005 16:39 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 20 januari 2005 16:38

Acties:

chris

Misschien heb je hier wat aan.

donderdag 20 januari 2005 16:40

Acties:

1st_Ro

onchange bestaat wel

Dan lijkt het me dat je een functie schrijft in javascript die de value van het 1e tekstveld neemt en dat in het 2e veld propt.

Verder kan je een textveld ook niet selecteerbaar maken met het unselectable attribuut.

edit:
Apart dat in de Mozilla ref onchange er niet bijstaat? Of zit ik gewoon scheef?

[ Voor 11% gewijzigd door 1st_Ro op 20-01-2005 16:41 ]

donderdag 20 januari 2005 16:40

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Ik zie het, die had ik zelf moeten vinden, excuus. Bedankt voor de voorbeelden.

Ik enthousiast aan de slag... werkt het niet.

code:

<html>
<head>
    <title>JS Test</title>
    <script language='javascript'>
    function zetTekst(value)
    {
        document.getElementById('test').innerText = value;
    }
    </script>
</head>
<body>

<input type='text' onKeyUp="zetTekst(this.value)"><br><br>
<div id='test'></div>

</body>
</html>

Ik heb even gecontroleerd wat er gebeurt, en de waarde van het veld komt wel goed aan in de functie. Het lijkt er op dat de .innerText niet helemaal lekker wil werken. Ik heb het getest op een normaal tekstveld, deze div en nog een aantal andere mogelijkheden om iets tussen te zetten. Waar zit het fout?

[ Voor 81% gewijzigd door Kaastosti op 20-01-2005 16:56 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

donderdag 20 januari 2005 17:07

Acties:

1st_Ro

Volgens mij is value een gereserveerd woord die je niet als variabele mag gebruiken.

Dus zoiets werkt wel:

code:

<html>
<head>
    <title>JS Test</title>
    <script language='javascript'>
    function zetTekst(myText)
    {
        document.getElementById('test').innerText = myText;
    }
    </script>
</head>
<body>

<input type="text" onKeyUp="zetTekst(this.value)"><br><br>
<div id="test"></div>

</body>
</html>

Let ook even op het gebruik van quotes in HTML, dubbele quotes hebben de voorkeur (zelfs verplicht? Dat weet ik dus weer niet zeker)

donderdag 20 januari 2005 17:20

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

OMG dit meen je niet... werkt onder Internet Explorer wel, dat kopieeren van tekst.. tenminste, alleen in het input ding dan. Firefox echter gaat het met dit commando niet lukken... eens kijken of er daar een alternatief voor is.

Het ligt overigens aan de innerText.. want als ik een alert geef bij het uitvoeren van de functie, werkt het in firefox ook

[ Voor 23% gewijzigd door Kaastosti op 20-01-2005 17:21 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

donderdag 20 januari 2005 17:23

Acties:

Verwijderd

Kaastosti schreef op donderdag 20 januari 2005 @ 17:20:
OMG dit meen je niet... werkt onder Internet Explorer wel, dat kopieeren van tekst.. tenminste, alleen in het input ding dan. Firefox echter gaat het met dit commando niet lukken... eens kijken of er daar een alternatief voor is.

Het ligt overigens aan de innerText.. want als ik een alert geef bij het uitvoeren van de functie, werkt het in firefox ook

innerText is geen DOM property. Als je gewoon met DOM aan de gang gaat moet het gewoon werken. Je moet dus gewoon de Text node gebruiken.

donderdag 20 januari 2005 17:25

Acties:

BtM909

Watch out Guys...

Kaastosti schreef op donderdag 20 januari 2005 @ 17:20:
OMG dit meen je niet... werkt onder Internet Explorer wel, dat kopieeren van tekst.. tenminste, alleen in het input ding dan. Firefox echter gaat het met dit commando niet lukken... eens kijken of er daar een alternatief voor is.

Het ligt overigens aan de innerText.. want als ik een alert geef bij het uitvoeren van de functie, werkt het in firefox ook

FireFox kent alleen innerHTML (wat je waarschijnlijk niet wilt

), maar als je kijkt via de DOM-inspector (binnen firefox), dan kan je ook gewoon de text node aanpassen.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 20 januari 2005 17:46

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Ik kan dus serieus die hele DOM inspector niet meer vinden. Ik weet dat ie er op zit, ik heb 'm al eerder gebruikt.. maar hij is gewoon weg, foetsie

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

donderdag 20 januari 2005 17:58

Acties:

Verwijderd

Probeer het volgende eens:

code:

<html>
<head>
<title>JS Test</title>
<script type="text/javascript">

function zetTekst(myText){
    obj = document.getElementById('test');
    txt = document.createTextNode(myText);
    if(obj.childNodes.length == 0){
        obj.appendChild(txt);
        }
    else {
        obj.replaceChild(txt, obj.firstChild);
        }
    }

</script>
</head>
<body>

<input type="text" onkeyup="zetTekst(this.value)"><br><br>
<div id="test"></div>

</body>
</html>

Ik weet niet voor welke browsers je aan het schrijven bent, maar dit zou moeten werken op de nieuwere versies van IE, Moz, FF, NS, Opera, etc.

donderdag 20 januari 2005 19:03

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Dat werkt inderdaad goed

Nou moet ik nog even uitvissen hoe die nodes werken, dan kan ik 't zelf ook doen misschien

thx

Bij meerdere elementen updaten vanuit dezelfde bron werkt het weer niet, maar dat zal ongetwijfeld ook met die nodes op te lossen zijn. Daar ga ik me dan even op richten, correct me if I'm wrong

Ik heb maar 1 element <font> gebruikt, dus ik wilde getElementsByTagName('font') gebruiken, zodat ik een array heb van al die tags. Die wilde ik vervolgens gebruiken op de manier die cytro neer heeft gezet. Toch wordt er nog steeds maar 1 veld veranderd, terwijl ik er totaal 24 stuks wil updaten. Waar zit 'm hier de denkfout?

code:

<script type="text/javascript">
    function zetTekst(myText)
    {
    obj = document.getElementsByTagName('font')
    txt = document.createTextNode(myText);
    for(var i = 0; i < obj.length; i++)
    {
        if(obj[i].childNodes.length == 0)
        {
            obj[i].appendChild(txt);
        }
        else
        {
            obj[i].replaceChild(txt, obj[i].firstChild);
        }
      }
  }
</script>

[ Voor 101% gewijzigd door Kaastosti op 21-01-2005 12:24 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

maandag 24 januari 2005 11:22

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Niemand? Ik heb er naar zitten kijken maar zie nog steeds niet echt waarom dit 'm niet gaat worden

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

maandag 24 januari 2005 11:52

Acties:

Verwijderd

Je moet 24 verschillende nodes maken. Een node kan maar op 1 plek voorkomen. Als je hem ergens anders zet, verdwijnt hij van zijn oorspronkelijke plek. Je verplaatst nu die ene node 23 keer.

Maak ervan:

JavaScript:

// snip
var obj = document.getElementsByTagName('font');

for(var i = 0; i < obj.length; i++) {
   var txt = document.createTextNode(myText);
   // etc...

Die var keyword zorgen ervoor dat het lokale variabelen worden en zijn dus niet buiten de functie bekend

[ Voor 4% gewijzigd door Verwijderd op 24-01-2005 11:52 ]

maandag 24 januari 2005 12:12

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Ahaaa dus daarom kreeg ik zulke rare resultaten.. nu snap ik 'm

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.