[JS] Tekst direct kopieeren naar ander element

Pagina: 1
Acties:
  • 241 views sinds 30-01-2008
  • Reageer

  • Kaastosti
  • Registratie: Juni 2000
  • Laatst online: 15-05 07:47

Kaastosti

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.


  • BtM909
  • Registratie: Juni 2000
  • Niet online

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.


  • chris
  • Registratie: September 2001
  • Laatst online: 11-03-2022
Misschien heb je hier wat aan.

  • 1st_Ro
  • Registratie: December 2002
  • Laatst online: 07-01-2022
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 ]


  • Kaastosti
  • Registratie: Juni 2000
  • Laatst online: 15-05 07:47

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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.


  • 1st_Ro
  • Registratie: December 2002
  • Laatst online: 07-01-2022
Volgens mij is value een gereserveerd woord die je niet als variabele mag gebruiken.

Dus zoiets werkt wel:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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)

  • Kaastosti
  • Registratie: Juni 2000
  • Laatst online: 15-05 07:47

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.


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.

  • BtM909
  • Registratie: Juni 2000
  • Niet online

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.


  • Kaastosti
  • Registratie: Juni 2000
  • Laatst online: 15-05 07:47

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.


Verwijderd

Probeer het volgende eens:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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.

  • Kaastosti
  • Registratie: Juni 2000
  • Laatst online: 15-05 07:47

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 :P 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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.


  • Kaastosti
  • Registratie: Juni 2000
  • Laatst online: 15-05 07:47

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.


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:
1
2
3
4
5
6
// 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 ]


  • Kaastosti
  • Registratie: Juni 2000
  • Laatst online: 15-05 07:47

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.

Pagina: 1