Mit Klick Content in Feld hinzufügen

[Juliane]

Hallo liebe Leute,

ich suche verzweifelt nach einer Code-Möglichkeit. Ich habe alles durchgoogelt, aber weiß gar nicht, nach welchem Stichwort ich suchen sollte. Meine haben zu keinem Ergebnis geführt.

Also:

Ich habe da ein Input-Feld in welches man ein Text frei eintragen kann.

Darunter sollen ein paar Stichworte stehen. Klickt man diese an, werden sie automatisch in das bezeichnete Input-Feld eingefügt, aber OHNE den dort ggf. schon vorhandenen Text zu ersetzen. Statt dessen soll der Inhalt hinten angefügt werden.

Wenn mir jemand da einen Tipp geben könnte wäre ich schon sehr froh.

Jetzt kommt es aber noch bunter:

Dazu soll es auch ein Drop-Down-Menü geben. Wenn man dort etwas auswählt, dann soll eine bestimmte Zeichenkette, die eventuell schon im Input-Feld vorhanden ist, ERSETZT werden.

Geht sowas überhaupt?

Bitte fragt mich nicht, wofür ich das brauche... ;-)

[jobo]

Hallo,

ohja, gehen tut das alles. wofür brauchst du das denn, trotzdem die frage. mit dem onchange gibt es grad einen parallelen thread.

https://forum.selfhtml.org/?t=193897&m=1295761

tipp: bau alles nacheinander.

  
<input id="myinput" type="text" value="nischt">  
<div id="textparas">  
<p>ein text</p>  
<p>mehr text</p>  
</div>  
<script type="text/javascript">  
[code lang=javascript]  
setup = function() {  
	var myInput = document.getElementById("myinput");  
	var textparasDiv  = document.getElementById("textparas");  
	var pL =textparasDiv.getElementsByTagName("p");  
	for (var i = 0; i < pL.length; i++) {  
		pL[i].onclick = function() {  
			myInput.value += this.innerHTML;  
		}  
	}  
}  
setup();  

</script>
[/code]

Gruß

jobo

[Juliane]

Hallo Jobo,

1000 Dank! Das funktioniert schon sehr gut.

Nur noch zwei Fragen: Durch das <p> ist jetzt immer eine unschöne Spalte zwischen den Worten frei. Das ist nicht so gut. Mit <BR> klappt es aber nicht.

Und wenn ich zusätzlich zu dem Wort noch ein Zeichen hinzufügen will (konkret: einen Querstrich / ) - wo kann ich das definieren?

[gast42]

Durch das <p> ist jetzt immer eine unschöne Spalte zwischen den Worten frei.

Das kannst du im Stylesheet ändern:
#textparas p {margin:0;padding:0}

Und wenn ich zusätzlich zu dem Wort noch ein Zeichen hinzufügen will (konkret: einen Querstrich / ) - wo kann ich das definieren?

myInput.value += "was auch immer du einfügen willst"+this.innerHTML;

[jobo]

Hallo,

Das kannst du im Stylesheet ändern:

#textparas p {margin:0;padding:0}

Und wenn ich zusätzlich zu dem Wort noch ein Zeichen hinzufügen will (konkret: einen Querstrich / ) - wo kann ich das definieren?

myInput.value += "was auch immer du einfügen willst"+this.innerHTML;

  
  
<input id="myinput" type="text" value="nischt" size="400">  
<div id="textparas">  
<p>ein text</p>  
<p>mehr text</p>  
</div>  
<script type="text/javascript">  
[code lang=javascript]  
	myInput = document.getElementById("myinput");  
setup = function() {  
	var textparasDiv  = document.getElementById("textparas");  
	var pL =textparasDiv.getElementsByTagName("p");  
	for (var i = 0; i < pL.length; i++) {  
		pL[i].onclick = function() {  
			myInput.value += this.innerHTML;  
		}  
	}  
}  
setup();  

</script>
<select id="ersetzen">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
<script type="text/javascript">

  
setErsetzenHandler = function() {  
	var ersetzen = document.getElementById("ersetzen");  
	var oL =ersetzen.getElementsByTagName("option");  
	var replacement = " - xxx  -";  
	ersetzen.onchange = function() {  
		var sI = ersetzen.selectedIndex;  
		var searchFor = new RegExp (oL[sI].innerHTML,"g");  
		alert ("ersetze in: "+ myInput.value + " \nden regulären Ausdruck: " + searchFor + " \ndurch den Text: " + replacement);  
		replaced =  myInput.value.replace(searchFor,replacement);  
		alert ("ersetzt: "+replaced);  
		myInput.value = replaced;  
	}  
}  
setErsetzenHandler();  

</script>

[/code]

Ersetzen find ich ja knifflig...;

Gruß

jobo

[Juliane]

Ihr seit genial!

Das hinzufügen klappt super!!!

Das Ersetzen klappt leider nicht, war aber auch nicht so wichtig..

[jobo]

Hallo,

Ihr seit genial!

Das hinzufügen klappt super!!!

Das Ersetzen klappt leider nicht, war aber auch nicht so wichtig..

Also bei mir klappt es...???

Gruß

jobo

[jobo]

Hallo,

Also bei mir klappt es...???

es muss in dem fall natürlich "aaa", "bbb" oder "ccc" irgendwo im textfeld eingetragen sein.

und es erstetzt die zeichen nur mit einer zeichenkette: "- xxx -";

Gruß

jobo

[Jule]

es muss in dem fall natürlich "aaa", "bbb" oder "ccc" irgendwo im textfeld eingetragen sein.

und es erstetzt die zeichen nur mit einer zeichenkette: "- xxx -";

Hi,

ach so... wie witzig, es sollte genau andersrum sein. XXX im Textfeld sollte mit dem ersetzt werden, was man auswählt, also aaa, bbb usw.

[jobo]

Hallo,

ach so... wie witzig, es sollte genau andersrum sein. XXX im Textfeld sollte mit dem ersetzt werden, was man auswählt, also aaa, bbb usw.

Naja, braucht man ja nur searchString und replacement zu verändern:

  
<input id="myinput" type="text" value="nischt" size="400">  
<div id="textparas">  
<p>ein text</p>  
<p>mehr text</p>  
</div>  
<script type="text/javascript">  
[code lang=javascript]  
	myInput = document.getElementById("myinput");  
setup = function() {  
	var textparasDiv  = document.getElementById("textparas");  
	var pL =textparasDiv.getElementsByTagName("p");  
	for (var i = 0; i < pL.length; i++) {  
		pL[i].onclick = function() {  
			myInput.value += this.innerHTML;  
		}  
	}  
}  
setup();  

</script>
<select id="ersetzen">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
<script type="text/javascript">

  
setErsetzenHandler = function() {  
	var ersetzen = document.getElementById("ersetzen");  
	var oL =ersetzen.getElementsByTagName("option");  
	var searchString = "XXX";  
	var searchFor = new RegExp (searchString,"g");  
	ersetzen.onchange = function() {  
		var sI = ersetzen.selectedIndex;  
		replacement = oL[sI].innerHTML;  
		alert ("ersetze in: "+ myInput.value + " \nden regulären Ausdruck: " + searchFor + " \ndurch den Text: " + replacement);  
		replaced =  myInput.value.replace(searchFor,replacement);  
		alert ("ersetzt: "+replaced);  
		myInput.value = replaced;  
	}  
}  
setErsetzenHandler();  

</script>
[/code]
Gruß

jobo