HTML - Sustituir palabras por contenido de inputs

 
Vista:

Sustituir palabras por contenido de inputs

Publicado por Isabel (1 intervención) el 07/02/2018 23:10:32
Hola Chicos, estoy con un tema para los nenes y se me a ocurrido hacer una cosita para ellos pero ya estoy bloqueada llevo dos semanas con ello y estoy estancada apunto de tirar la toalla :(

necesito sustituir palabras de un cuento por el contenido de los input que rellenen los niños.

he conseguido, con unos ejemplos, encontrar algo ,que con lo poco que yo se, puedo modificar para la primera parte.

tengo un combo en el que selecciono un cuento y me aparece el formulario a cubrir y el texto del cuento, pero no consigo meter en medio del texto los contenidos de los input.

Solo valiéndome de un ejemplo, consigo que se meta el texto según voy escribiendo pero me hace salto de línea y me desmonta el texto.

Seguro que estoy matando moscas a cañonazos, y que seguro que hay alguna otra manera de insertar un texto de un input en un párrafo de otra manera.

Adjunto el código a ver si alguien se le ocurre algo y me puede echar una mano

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Combo con campos condicionales</title>
	<style type="text/css">
		* { padding:0px; margin:0px; }
		body { font-family: arial, sans-serif; }
		.container { max-width:500px; margin:auto; }
		.comboSelector { background-color:#f44336; padding:30px; }
		select#tipo { padding:5px 10px; }
		.opcionesWrapper { background-color:#311b92; padding:20px 30px; color:#FFF; }
		.opciones { display:none; }
		.btn { border:none; padding:10px 20px; color:#FFF; background-color:#f44336; margin-top:20px; cursor:pointer; }
		.btn:hover { background-color:#b71c1c; }
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="comboSelector">
		<select name="tipo" id="tipo" onchange="elegir_opcion(this);" style="width: 219px; height: 30px">
			<option value="">Elije un Cuento</option>
			<option value="op1">Caperucita Roja</option>
			<option value="op2">Pulgarcito</option>
			<option value="op3">Tipo 3</option>
		</select>
		</div>
		<div class="opcionesWrapper">
			Ahora cubre los datos que se te piden abajo&nbsp;
		</div>
	</div>
 
 
	<div class="opciones">
		<div id="op1">
			<form>
			Como te llamas?&nbsp; <input  class="input"  id="entrada2" onkeyup="javascript:{UI=document.getElementById('entrada2').value;
   document.getElementById('ejemplo2').innerHTML=' '+UI;}" />
<br>
			<p>Donde Vives?&nbsp; <input type="text" size="30" name="ciudad" /><br>
			Cuantos años tienes? &nbsp; <input type="text" size="10" name="niño" /><br>
			Como se llama tu mascota?&nbsp;&nbsp;<input type="text" size="10" name="mascota" /><br>
			<br><br />
			</p>
			<p>Era se , una vez, un niño que se llamaba<div style="color:white;font-size:16px;" id='ejemplo2'></div>, este niño vivia
			en una ciudad muy bonita, esta ciudad era #ciudad#. Todavia era muy 
			pequeño solo tenia #años# y por eso tenia mucho miedo a los lobos, 
			una vez, la madre de una niña de #ciudad# la mando a casa de su 
			abuelita ........... etc etc.</p>
			<input type="submit" name="submit" value="ENVIAR" class="btn" />
			</form>
		</div>
		<div id="op2">
			<form>
<table style="width: 465px; height: 144px;">
				<tr>
					<td style="width: 177px; height: 140px;" valign="top">
					<p class="style2" style="height: 140px">Como te llamas?<br>
					Donde vives?<br>
					Cuantos años tienes?<br>
					Como se llama Papa?<br>
					Como se llama Mama?</p>
					</td>
					<td style="height: 140px" valign="top">
					<p class="style2" style="height: 140px">
					<input type="text" size="30" name="niño" required="required" /><br />
					<input type="text" size="30" name="ciudad" required="required" /><br />
					<input type="text" size="10" name="años" required="required" /><br />
					<input type="text" size="10" name="papa" required="required" /><br />
					<input type="text" size="20" name="mama" required="required" /></p>
					</td>
				</tr>
			</table>
 
			<br><br />
            <p>texto del cuento pulgarcito....</p>
			<input type="submit" name="submit" value="ENVIAR" class="btn" />
			</form>
		</div>
 
	</div>
 
	<script type="text/javascript">
		function elegir_opcion(combo) {
			$tipo = jQuery(combo).val();
			$campos = jQuery("#"+$tipo).html();
			jQuery(".opcionesWrapper").html($campos);
		}
	</script>
 
</body>
</html>


el botón de enviar no hace nada lo puse por si era necesario para insertar el texto.

Gracias anticipadas Isabel
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de xve
Val: 814
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Sustituir palabras por contenido de inputs

Publicado por xve (1540 intervenciones) el 08/02/2018 08:54:58
Hola Isabel, eso es porque has utilizado <div> aquí:
1
<div style="color:white;font-size:16px;" id='ejemplo2'></div>
Cámbialo por <span>:
1
<span style="color:white;font-size:16px;" id='ejemplo2'></span>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 14 puestos en HTML (en relación al último mes)
Gráfica de HTML

Sustituir palabras por contenido de inputs

Publicado por Isabel (2 intervenciones) el 08/02/2018 19:24:27
Lo primero gracias, gracias, gracias.
Efectivamente con "span" obtengo el resultado que yo quería.
Casi tiro la toalla y casi lo tenia.

Reitero mis gracias xve.

Aparte y por ultimo es muy complicado usar el botón de enviar para que copie el texto ya cubierto?

Un saludo Isa :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 814
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Sustituir palabras por contenido de inputs

Publicado por xve (1540 intervenciones) el 08/02/2018 20:23:18
Hola Isabel, no hay problema, se puede copiar sin problema con JavaScript... pero donde lo quieres copiar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 14 puestos en HTML (en relación al último mes)
Gráfica de HTML

Sustituir palabras por contenido de inputs

Publicado por Isabel (2 intervenciones) el 08/02/2018 22:12:36
Hola xve, Te cuento, soy profesora de infantil y la idea es que cojan un poco de practica con el ordenador, cuando vean un input sepan que es para escribir, que un combo se despliega, etc.

Ahora la idea (mis ideas, que algunos no les gustan) es que se copie el texto al portapapeles, para que se pueda pegar en un OpenOffice (único programa que tenemos en el cole) y ahí ya hacer otra cosas.

Después de contarte mi vida, el tema seria solo copiarlo al portapapeles :)

Un Saludo Isa.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar