Volver al Programación / Codificación foro

Copiar texto en el cuadro de texto mediante Javascript cuando hace clic en el botón

  • Slobrob
  • Born
  • Born
  • No Avatar
  • Registrado: Sep 03, 2011
  • Mensajes: 2
  • Status: Offline

Nota Septiembre 3rd, 2011, 12:02 pm

Hola

Im un poco de un novato pero im haciendo un poco de proyectos por mí mismo y han comenzado a aprender javascript.
Soy después es crear botones para que cada vez que se hace clic en un botón se copia y pega en el cuadro de texto. Ive hacer esto pero he parecen tener un problema, tengo varios botones y cada vez presione un botón diferente viene con la misma información en el primer botón.

por ejemplo, tengo botón 1, 2, 3, 4, etc. y si presiona el botón 1 o 2 o 3 todavía pegará botón 1. ¿Alguna idea? Ive adjunto mi código siguiente

Código: [ Select ]
<script language="JavaScript">
function clipboard()
{
var copyclip = document.getElementById('copy').createTextRange();
copyclip.select();
copyclip.execCommand("Copy");

}

function paste()
{
document.getElementById('text').focus();
var paste = document.selection.createRange();
paste.execCommand("Paste");
}

if (window.clipboardData != "") {
    window.clipboardData.clearData("Text");
}
</script>

<div id="">
<BUTTON id="copy" onClick="clipboard(); paste(); clear();">Option 1 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 2 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 3 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 4 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 5 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:250px;">
</TEXTAREA>
  1. <script language="JavaScript">
  2. function clipboard()
  3. {
  4. var copyclip = document.getElementById('copy').createTextRange();
  5. copyclip.select();
  6. copyclip.execCommand("Copy");
  8. }
  10. function paste()
  11. {
  12. document.getElementById('text').focus();
  13. var paste = document.selection.createRange();
  14. paste.execCommand("Paste");
  15. }
  17. if (window.clipboardData != "") {
  18.     window.clipboardData.clearData("Text");
  19. }
  20. </script>
  22. <div id="">
  23. <BUTTON id="copy" onClick="clipboard(); paste(); clear();">Option 1 <br /> </BUTTON>
  24. <BUTTON id="copy" onClick="clipboard(); paste();">Option 2 <br /> </BUTTON>
  25. <BUTTON id="copy" onClick="clipboard(); paste();">Option 3 <br /> </BUTTON>
  26. <BUTTON id="copy" onClick="clipboard(); paste();">Option 4 <br /> </BUTTON>
  27. <BUTTON id="copy" onClick="clipboard(); paste();">Option 5 <br /> </BUTTON>
  28. <BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  29. <BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  30. <BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  31. <BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  32. <BUTTON id="copy" onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  33. <p />
  34. </div>
  35. <TEXTAREA ID="text" style="height:100px; width:250px;">
  36. </TEXTAREA>
Moderator Remark: Made title of topic more specific
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Septiembre 3rd, 2011, 12:02 pm

  • WritingBadCode
  • Graduate
  • Graduate
  • Avatar de Usuario
  • Registrado: Abr 28, 2011
  • Mensajes: 214
  • Loc: Sweden
  • Status: Offline

Nota Septiembre 3rd, 2011, 5:53 pm

Todos los botones tienen el mismo identificador.
Por lo tanto la línea:

Código: [ Select ]
var copyclip = document.getElementById('copy').createTextRange();


Probablemente sólo recogerá la primera instancia de copia (el primer botón) y se detiene allí. Sobre todo porque los identificadores son generalmente únicos.

He hecho algunos pequeños cambios en la secuencia de comandos. Primero dio un número id exclusivo a cada botón y agregado de modo que creo que es el identificador correcto se envía cuando algún botón:

Código: [ Select ]

<BUTTON id="1" onClick="clipboard(1); paste(); clear();">Option 1

<br /> </BUTTON>
<BUTTON id="2" onClick="clipboard(2); paste();">Option 2 <br />

</BUTTON>
<BUTTON id="3" onClick="clipboard(3); paste();">Option 3 <br />

</BUTTON>
<BUTTON id="4" onClick="clipboard(4); paste();">Option 4 <br />

</BUTTON>
<BUTTON id="5" onClick="clipboard(5); paste();">Option 5 <br />

</BUTTON>
<BUTTON id="6" onClick="clipboard(6); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="7" onClick="clipboard(7); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="8" onClick="clipboard(8); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="9" onClick="clipboard(9); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="10" onClick="clipboard(10); paste();">Option 1 <br />

</BUTTON>
  2. <BUTTON id="1" onClick="clipboard(1); paste(); clear();">Option 1
  4. <br /> </BUTTON>
  5. <BUTTON id="2" onClick="clipboard(2); paste();">Option 2 <br />
  7. </BUTTON>
  8. <BUTTON id="3" onClick="clipboard(3); paste();">Option 3 <br />
  10. </BUTTON>
  11. <BUTTON id="4" onClick="clipboard(4); paste();">Option 4 <br />
  13. </BUTTON>
  14. <BUTTON id="5" onClick="clipboard(5); paste();">Option 5 <br />
  16. </BUTTON>
  17. <BUTTON id="6" onClick="clipboard(6); paste();">Option 1 <br />
  19. </BUTTON>
  20. <BUTTON id="7" onClick="clipboard(7); paste();">Option 1 <br />
  22. </BUTTON>
  23. <BUTTON id="8" onClick="clipboard(8); paste();">Option 1 <br />
  25. </BUTTON>
  26. <BUTTON id="9" onClick="clipboard(9); paste();">Option 1 <br />
  28. </BUTTON>
  29. <BUTTON id="10" onClick="clipboard(10); paste();">Option 1 <br />
  31. </BUTTON>


He añadido una variable llamada ID_value para manejar los identificadores que el botón enviar.
Código: [ Select ]
function clipboard(ID_value)
{
var copyclip =

document.getElementById(ID_value).createTextRange();
copyclip.select();
copyclip.execCommand("Copy");

}
  1. function clipboard(ID_value)
  2. {
  3. var copyclip =
  5. document.getElementById(ID_value).createTextRange();
  6. copyclip.select();
  7. copyclip.execCommand("Copy");
  9. }


Se utiliza la variable ID_value que se ha añadido por el getElementById(ID_value) para seleccionar el botón correcto.

Código completo:

Código: [ Select ]
<script language="JavaScript">
function clipboard(ID_value)
{
var copyclip =

document.getElementById(ID_value).createTextRange();
copyclip.select();
copyclip.execCommand("Copy");

}

function paste()
{
document.getElementById('text').focus();
var paste = document.selection.createRange();
paste.execCommand("Paste");
}

if (window.clipboardData != "") {
  window.clipboardData.clearData("Text");
}
</script>

<div id="">
<BUTTON id="1" onClick="clipboard(1); paste(); clear();">Option 1

<br /> </BUTTON>
<BUTTON id="2" onClick="clipboard(2); paste();">Option 2 <br />

</BUTTON>
<BUTTON id="3" onClick="clipboard(3); paste();">Option 3 <br />

</BUTTON>
<BUTTON id="4" onClick="clipboard(4); paste();">Option 4 <br />

</BUTTON>
<BUTTON id="5" onClick="clipboard(5); paste();">Option 5 <br />

</BUTTON>
<BUTTON id="6" onClick="clipboard(6); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="7" onClick="clipboard(7); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="8" onClick="clipboard(8); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="9" onClick="clipboard(9); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="10" onClick="clipboard(10); paste();">Option 1 <br />

</BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:250px;">
</TEXTAREA>
  1. <script language="JavaScript">
  2. function clipboard(ID_value)
  3. {
  4. var copyclip =
  6. document.getElementById(ID_value).createTextRange();
  7. copyclip.select();
  8. copyclip.execCommand("Copy");
  10. }
  12. function paste()
  13. {
  14. document.getElementById('text').focus();
  15. var paste = document.selection.createRange();
  16. paste.execCommand("Paste");
  17. }
  19. if (window.clipboardData != "") {
  20.   window.clipboardData.clearData("Text");
  21. }
  22. </script>
  24. <div id="">
  25. <BUTTON id="1" onClick="clipboard(1); paste(); clear();">Option 1
  27. <br /> </BUTTON>
  28. <BUTTON id="2" onClick="clipboard(2); paste();">Option 2 <br />
  30. </BUTTON>
  31. <BUTTON id="3" onClick="clipboard(3); paste();">Option 3 <br />
  33. </BUTTON>
  34. <BUTTON id="4" onClick="clipboard(4); paste();">Option 4 <br />
  36. </BUTTON>
  37. <BUTTON id="5" onClick="clipboard(5); paste();">Option 5 <br />
  39. </BUTTON>
  40. <BUTTON id="6" onClick="clipboard(6); paste();">Option 1 <br />
  42. </BUTTON>
  43. <BUTTON id="7" onClick="clipboard(7); paste();">Option 1 <br />
  45. </BUTTON>
  46. <BUTTON id="8" onClick="clipboard(8); paste();">Option 1 <br />
  48. </BUTTON>
  49. <BUTTON id="9" onClick="clipboard(9); paste();">Option 1 <br />
  51. </BUTTON>
  52. <BUTTON id="10" onClick="clipboard(10); paste();">Option 1 <br />
  54. </BUTTON>
  55. <p />
  56. </div>
  57. <TEXTAREA ID="text" style="height:100px; width:250px;">
  58. </TEXTAREA>


¿Supongo que esta probado en IE? Lo que debe observar (y ser conscientes de) es que ni tu o ejemplo minas parece ser Cruz compatible con el navegador - tengo un sentimiento observará por eso.
  • Slobrob
  • Born
  • Born
  • No Avatar
  • Registrado: Sep 03, 2011
  • Mensajes: 2
  • Status: Offline

Nota Septiembre 4th, 2011, 3:34 am

Gran! Gracias por esa WritingBadCode, pensé podría haber sido a lo largo de la derecha líneas simplemente no estaba seguro que me iba mal. Sí, soy consciente de que sólo funciona en IE - que es el único navegador web que va a utilizar para este proyecto.

Aunque tengo un par de preguntas. En primer lugar, cada vez que haga clic en uno de los botones copia a sí mismo en el cuadro de texto a continuación pero si me accidentalmente haga clic en el espacio en blanco restablece y ningún botón que pulso después de hacer clic en el espacio en blanco sustituye a la ive botones ya hizo clic. ¿Hay alguna manera para conseguir todo esto para que no suceda?

¿Mi segunda pregunta es cómo sería ir acerca de cómo agregar código que hace que un botón Deshacer eliminar la última línea de la información?

Cheers
  • WritingBadCode
  • Graduate
  • Graduate
  • Avatar de Usuario
  • Registrado: Abr 28, 2011
  • Mensajes: 214
  • Loc: Sweden
  • Status: Offline

Nota Septiembre 4th, 2011, 4:35 pm

Slobrob escribió:
Aunque tengo un par de preguntas. En primer lugar, cada vez que haga clic en uno de los botones copia a sí mismo en el cuadro de texto a continuación pero si me accidentalmente haga clic en el espacio en blanco restablece y ningún botón que pulso después de hacer clic en el espacio en blanco sustituye a la ive botones ya hizo clic. ¿Hay alguna manera para conseguir todo esto para que no suceda?


Si he entendido bien el problema es los usuarios poder haga clic en el campo de texto y de esta manera el texto pegado puede llegar a eliminar "las cosas".

Puede comenzar con lo que el área de texto de sólo lectura:

Código: [ Select ]
<TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
</TEXTAREA>
  1. <TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
  2. </TEXTAREA>


El usuario tendrá menos cosas que hacer ahora en el cuadro de texto, sin embargo el usuario todavía puede pulsar en el cuadro de texto y al hacerlo puede terminar siendo el texto pegado en algún lugar que no lo pueden interesarte.

Una posible solución simplemente es reescribir algunas cosas y al final hasta con algo aleatorio:
Código: [ Select ]
<script language="JavaScript">
function copy(ID_value)
{
var textToCopy = document.getElementById(ID_value).innerHTML;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}
</script>

<div id="">
<BUTTON id="1" onClick="copy(1);">Option 1 <br /> </BUTTON>
<BUTTON id="2" onClick="copy(2);">Option 2 <br /> </BUTTON>
<BUTTON id="3" onClick="copy(3);">Option 3 <br /> </BUTTON>
<BUTTON id="4" onClick="copy(4);">Option 4 <br /> </BUTTON>
<BUTTON id="5" onClick="copy(5);">Option 5 <br /> </BUTTON>
<BUTTON id="6" onClick="copy(6);">Option 1 <br /> </BUTTON>
<BUTTON id="7" onClick="copy(7);">Option 1 <br /> </BUTTON>
<BUTTON id="8" onClick="copy(8);">Option 1 <br /> </BUTTON>
<BUTTON id="9" onClick="copy(9);">Option 1 <br /> </BUTTON>
<BUTTON id="10" onClick="copy(10);">Option 1 <br /> </BUTTON>
<p />
</div>
<TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
</TEXTAREA>
  1. <script language="JavaScript">
  2. function copy(ID_value)
  3. {
  4. var textToCopy = document.getElementById(ID_value).innerHTML;
  5. var whereToCopy = document.getElementById("text");
  6. whereToCopy.value += textToCopy;
  7. }
  8. </script>
  10. <div id="">
  11. <BUTTON id="1" onClick="copy(1);">Option 1 <br /> </BUTTON>
  12. <BUTTON id="2" onClick="copy(2);">Option 2 <br /> </BUTTON>
  13. <BUTTON id="3" onClick="copy(3);">Option 3 <br /> </BUTTON>
  14. <BUTTON id="4" onClick="copy(4);">Option 4 <br /> </BUTTON>
  15. <BUTTON id="5" onClick="copy(5);">Option 5 <br /> </BUTTON>
  16. <BUTTON id="6" onClick="copy(6);">Option 1 <br /> </BUTTON>
  17. <BUTTON id="7" onClick="copy(7);">Option 1 <br /> </BUTTON>
  18. <BUTTON id="8" onClick="copy(8);">Option 1 <br /> </BUTTON>
  19. <BUTTON id="9" onClick="copy(9);">Option 1 <br /> </BUTTON>
  20. <BUTTON id="10" onClick="copy(10);">Option 1 <br /> </BUTTON>
  21. <p />
  22. </div>
  23. <TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
  24. </TEXTAREA>


El usuario puede ahora pulse todos quieren y el texto todavía terminará en la parte inferior del componente textarea. Sin embargo el código puede terminar siendo lento si obtiene gran cantidad de datos y se pega texto en una forma que puede o no puede ser querida. La mejor opción sería agregar un nuevo "objeto node" por ejemplo crea un nuevo paragraf o div que contiene el texto. Supongo que esto no era el código deseado, de todos modos:

Slobrob escribió:
¿Mi segunda pregunta es cómo sería ir acerca de cómo agregar código que hace que un botón Deshacer eliminar la última línea de la información?


Tiene varias opciones que mediante la manipulación de cadenas y mantener una historia sobre los cambios y utilizar algún corte de pegar técnica. Búsqueda por texto sin embargo (especialmente si la cantidad obtiene grande) es probablemente menos efectiva de crear nuevos objetos y simplemente seleccionar y eliminar la última adición de DOM tres. También nodos deben ofrecer más flexibilidad en general.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 4 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 226 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC