Foros del Web » Programando para Internet » Javascript »

Insertar simbolos en un input mediante un click

 Estas en el tema de Insertar simbolos en un input mediante un click en el foro de Javascript en Foros del Web. Como dice el titulo, lo que quiero es que cada vez que se haga click sobre cada simbolo, aparezca en el input, osea, ya vi ...
  #1 (permalink)  
Antiguo 05/09/2010, 14:42
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 13 años, 7 meses
Puntos: 0
Pregunta Insertar simbolos en un input mediante un click
Como dice el titulo, lo que quiero es que cada vez que se haga click sobre cada simbolo, aparezca en el input, osea, ya vi algo relacionado con eso [URL="http://www.forosdelweb.com/wiki/Javascript:%C2%BFC%C3%B3mo_insertar_emoticones_en_ un_textarea%3F"]aqui[/URL], el problema es que yo lo preciso para un input, y no logro que me funcione en nada, ya sea en un textarea o en un input, ya probé DE TODO y no me sale. Quisiera que algun webmaster profesional me ayude con esto :( ..

PD: Los simbolos a los que me refiero son .. ♡ | ♥ | ★ | ♀ | ♂ | ♠ | ♤ | ♣ | ♧ | © | ± | ☺ | ☻ | ☼ | ☎ | ♨ | ☞ | ♩ | ♪ | ♫
  #2 (permalink)  
Antiguo 05/09/2010, 14:48
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 15 años, 5 meses
Puntos: 66
Respuesta: Insertar simbolos en un input mediante un click
puedes poner algun codigo de que es lo que estas haciendo?, para ver mas o menos en que puedes estar mal.
  #3 (permalink)  
Antiguo 05/09/2010, 14:50
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Insertar simbolos en un input mediante un click
Mas o menos esto intenté hacer, modifiqué y todo, traté de hacerlo para un input tampoco anduvo.

Cita:
<script language="JavaScript">
<!--

function doleft2() {
document.form1.textarea.value = "";
}

function docheck() {
char = eval(document.form1.textarea.value.length)
var dif = eval(char - 168)
var value = document.form1.textarea.value.substr(0,char-dif);
document.form1.textarea.value = value;
var left = "0"
}

function doleft() {
total = eval("168")
char = eval(document.form1.textarea.value.length)
left = eval(total - char)
if (left <= "-1")
{
var dif = eval(char - 168)
var value = document.form1.textarea.value.substr(0,char-dif);
document.form1.textarea.value = value;
var left = "0"
}
document.form1.left.value = left
}


document.write("<body OnLoad=\"doleft2()\">")


-->
</script>


<div class="sin">
<a href="#" onclick="poner('♥'); return false;">♥</a>
<a href="#" onclick="poner('☺'); return false;">☺</a>
<a href="#" onclick="poner('♪'); return false;">♪</a>
<a href="#" onclick="poner('☻'); return false;">☻</a>
<a href="#" onclick="poner('☹'); return false;">☹</a>
<a href="#" onclick="poner('✉'); return false;">✉</a>
<a href="#" onclick="poner('☼'); return false;">☼</a>
<a href="#" onclick="poner('✩'); return false;">✩</a>
<a href="#" onclick="poner('♨'); return false;">♨</a>
<a href="#" onclick="poner('♫'); return false;">♫</a>
<a href="#" onclick="poner('☁'); return false;">☁</a>
<a href="#" onclick="poner('☂'); return false;">☂</a>
<a href="#" onclick="poner('☃'); return false;">☃</a>
<a href="#" onclick="poner('☎'); return false;">☎</a>
<a href="#" onclick="poner('✔'); return false;">✔</a>
<a href="#" onclick="poner('☛'); return false;">☛</a>
<a href="#" onclick="poner('☚'); return false;">☚</a>
<a href="#" onclick="poner('✂'); return false;">✂</a>
<a href="#" onclick="poner('✎'); return false;">✎</a>
<a href="#" onclick="poner('☪'); return false;">☪</a>
<a href="#" onclick="poner('✁'); return false;">✁</a>
<a href="#" onclick="poner('♩'); return false;">♩</a>
<a href="#" onclick="poner('✡'); return false;">✡</a>
<a href="#" onclick="poner('☢'); return false;">☢</a>
<a href="#" onclick="poner('❥'); return false;">❥</a>
<a href="#" onclick="poner('❂'); return false;">❂</a></div>

<form method="POST" action="index.php">
<textarea name="like" cols="100" rows="5" class="comments" onclick="docheck()" onkeyup="javascript:doleft();" onKeyPress="return noAcepto(event)" onpaste="return false" form="form"></textarea>
  #4 (permalink)  
Antiguo 05/09/2010, 15:01
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Insertar simbolos en un input mediante un click
Hola

Lo que necesitas es un editor de texto WYSIWYG. En la página de @caricatos hay uno, tienes otro en la faq de este foro

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 05/09/2010, 15:13
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Insertar simbolos en un input mediante un click
Cita:
Iniciado por Adler Ver Mensaje
Hola

Lo que necesitas es un editor de texto WYSIWYG. En la página de [URL="www.caricatos.net/"]@caricatos[/URL] hay uno, tienes otro en la faq de este foro

Suerte
Pero eso no es justamente lo que preciso, yo preciso que con solo clickear arriba del símbolo ese mismo símbolo se inserte.

Mira, es para una web de likes para facebook, yo preciso exactamente la que se encuentra aqui [URL="http://www.modafacebook.com/"]http://www.modafacebook.com/[/URL] .. Como veras si haces click en el input que dice "que te gusta hoy" sale una caja con muchos simbolos que al clickearlos aparecen en el input, bueno. Tampoco quiero el efecto de que aparezca la caja de simbolos al hacer click, solo quiero esa caja de simbolos :D ..
  #6 (permalink)  
Antiguo 05/09/2010, 15:15
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Insertar simbolos en un input mediante un click
Tambien en esta web se puede encontrar lo que quiero http://www.cominicio.com/ ... en el input de arriba lo veran :D
  #7 (permalink)  
Antiguo 05/09/2010, 17:20
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 13 años, 10 meses
Puntos: 310
Respuesta: Insertar simbolos en un input mediante un click
En la web esa el código es lo más sencillo que te puedas encontrar:
Código Javascript: 
Ver original
  1. function poner(texto){
  2.  document.getElementById('input').value += texto;
  3. }
Código HTML: 
Ver original
  1. <input type='text' id='input' />
  2. <a href="#" onclick="poner('♥'); return false;">♥</a>
  3. <a href="#" onclick="poner('☺'); return false;">☺</a>
  4. <a href="#" onclick="poner('♪'); return false;">♪</a>
  5. <a href="#" onclick="poner('☻'); return false;">☻</a>
  6. <a href="#" onclick="poner('☹'); return false;">☹</a>
  7. <a href="#" onclick="poner('✉'); return false;">✉</a>
  8. <a href="#" onclick="poner('☼'); return false;">☼</a>
  9. <a href="#" onclick="poner('✩'); return false;">✩</a>
  10. <a href="#" onclick="poner('♨'); return false;">♨</a>
  11. <a href="#" onclick="poner('♫'); return false;">♫</a>
  12. <a href="#" onclick="poner('☁'); return false;">☁</a>
  13. <a href="#" onclick="poner('☂'); return false;">☂</a>
  14. <a href="#" onclick="poner('☃'); return false;">☃</a>
  15. <a href="#" onclick="poner('☎'); return false;">☎</a>
  16. <a href="#" onclick="poner('✔'); return false;">✔</a>
  17. <a href="#" onclick="poner('☛'); return false;">☛</a>
  18. <a href="#" onclick="poner('☚'); return false;">☚</a>
  19. <a href="#" onclick="poner('✂'); return false;">✂</a>
  20. <a href="#" onclick="poner('✎'); return false;">✎</a>
  21. <a href="#" onclick="poner('☪'); return false;">☪</a>
  22. <a href="#" onclick="poner('✁'); return false;">✁</a>
  23. <a href="#" onclick="poner('♩'); return false;">♩</a>
  24. <a href="#" onclick="poner('✡'); return false;">✡</a>
  25. <a href="#" onclick="poner('☢'); return false;">☢</a>
  26. <a href="#" onclick="poner('❥'); return false;">❥</a>
  27. <a href="#" onclick="poner('❂'); return false;">❂</a>

Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #8 (permalink)  
Antiguo 05/09/2010, 18:28
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Insertar simbolos en un input mediante un click
Cita:
Iniciado por _cronos2 Ver Mensaje
En la web esa el código es lo más sencillo que te puedas encontrar:
Código Javascript: 
Ver original
  1. function poner(texto){
  2.  document.getElementById('input').value += texto;
  3. }
Código HTML: 
Ver original
  1. <input type='text' id='input' />
  2. <a href="#" onclick="poner('♥'); return false;">♥</a>
  3. <a href="#" onclick="poner('☺'); return false;">☺</a>
  4. <a href="#" onclick="poner('♪'); return false;">♪</a>
  5. <a href="#" onclick="poner('☻'); return false;">☻</a>
  6. <a href="#" onclick="poner('☹'); return false;">☹</a>
  7. <a href="#" onclick="poner('✉'); return false;">✉</a>
  8. <a href="#" onclick="poner('☼'); return false;">☼</a>
  9. <a href="#" onclick="poner('✩'); return false;">✩</a>
  10. <a href="#" onclick="poner('♨'); return false;">♨</a>
  11. <a href="#" onclick="poner('♫'); return false;">♫</a>
  12. <a href="#" onclick="poner('☁'); return false;">☁</a>
  13. <a href="#" onclick="poner('☂'); return false;">☂</a>
  14. <a href="#" onclick="poner('☃'); return false;">☃</a>
  15. <a href="#" onclick="poner('☎'); return false;">☎</a>
  16. <a href="#" onclick="poner('✔'); return false;">✔</a>
  17. <a href="#" onclick="poner('☛'); return false;">☛</a>
  18. <a href="#" onclick="poner('☚'); return false;">☚</a>
  19. <a href="#" onclick="poner('✂'); return false;">✂</a>
  20. <a href="#" onclick="poner('✎'); return false;">✎</a>
  21. <a href="#" onclick="poner('☪'); return false;">☪</a>
  22. <a href="#" onclick="poner('✁'); return false;">✁</a>
  23. <a href="#" onclick="poner('♩'); return false;">♩</a>
  24. <a href="#" onclick="poner('✡'); return false;">✡</a>
  25. <a href="#" onclick="poner('☢'); return false;">☢</a>
  26. <a href="#" onclick="poner('❥'); return false;">❥</a>
  27. <a href="#" onclick="poner('❂'); return false;">❂</a>

Saludos (:
Gracias, simplemente gracias, la verdad que aposté muy bien al unirme a este foro ^^ ... GRACIAS :)
  #9 (permalink)  
Antiguo 14/09/2010, 07:40
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Insertar simbolos en un input mediante un click
Aunque ya resolviste el asunto, aprovecho el tema para poner otros ejemplos en este sitio.

Antes voy a apoyar la respuesta de Adler, la idea es que desarmes el código de caricatos para extraer lo que te sirva. De hecho, _cronos2 extrajo de tu enlace una versión simple ... que no inserta el caracter, sólo lo pone al final. Pero si te sirve está bien.

Si puedes evitar los enlaces y poner en su lugar botones o simplemente los símbolos cada uno dentro de un span, mejor. Y ya que hablamos de símbolos, por más que uses UTF-8 lo mejor es poner el código en vez del caracter, el mejor formato dependerá del elemento de destino.
Son sugerencias, no más.

Select + TextArea

predefinicion de codigo hexadecimal a mostrar en textarea

Negrita en un TEXTAREA

explorer: cursor en textarea

(caracteres especiales) acento simple...

Caracteres especiales en Javascript

Webdings, ¿sólo para Explorer?

http://www.foro-virtual.com.ar/viewt...p?f=42&t=11516

Edición :


El enlace con la descripción de varios juegos de caracteres unicode que puse arriba ya no está en línea. Por eso busqué una copia y la subí comprimida a megaplod por si a alguien le interesa estudiarlos.
El nuevo enlace está en

font-family: unicode; #5
Última edición por furoya; 22/09/2011 a las 15:36

Etiquetas: enlace, input, insertar, simbolo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:53.