sobre textbox y smilies

zeus_bsas · #1 (**permalink**) 19/11/2002, 15:01

Alguien me puede pasar algun codigo para incluir texto en un textbox al pulsar algo?
Se como se podria hacer para cambiar el contenido del textbox, o como agregar algo al final, pero no como agregar algo en el lugar en donde este el cursor, como pasa aca con los smilies.

caricatos · #2 (**permalink**) 19/11/2002, 15:34

Hola zeus_bsas:

El secreto está en poner texto en vez de los smiles, y luego procesar ese texto, más o menos así:
texto.replace("[

]","<img src=sonrisa.gif>");

Puedes ver el código que tengo en mi libro de visitas (no del todo depurado): http://pepemolina.com/visitas/visitas.php

Saludos

zeus_bsas · #3 (**permalink**) 19/11/2002, 16:20

Si caricatos, pero parece que tenemos el mismo problema. Entiendo lo de agregar texto y luego reemplazarlo por la etiqueta correspondiente, pero no era lo que preguntaba...
Tanto vos como yo tenemos este problema: Si escribis todo el mensaje, y despues posas el cursor en el medio, e insertas un smile, este se pone al final y no en el medio. Chequealo. Y mira como funciona aca, uno pone el smilie donde quiere, probalo.

En cuanto a lo de seguridad, nadie sabe?

Kaopectate · #4 (**permalink**) 19/11/2002, 18:27

Eso estaba magistralmente resuelto en el foro anterior. Voy a ver si guardo una copia para compartirla contigo.

Saludos.

Kaopectate · #5 (**permalink**) 19/11/2002, 18:31

Revisa esto:

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="Javascript" type="text/javascript">

// Este genial Script fue desarrollado por Tukzone, SirMatrix y Unknow,
// todos usuarios del Foro.. Gracias a ellos por su colaboración

function storeCaret(text) {
if (text.createTextRange) {
text.caretPos = document.selection.createRange().duplicate();
}
}

function meter(text) {
var postopic = document.PostTopic.Message;
if (postopic.createTextRange && postopic.caretPos) {
var caretPos = postopic.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
}
else postopic.value += text;
postopic.focus(caretPos)
}

function codigo(accion) {
switch(accion) {
case "url":
url = prompt("URL de el Enlace", "http://");
if(url) {
url="[ a]"+url+"[ /a]";
meter(url);
}
break;
case "bold":
negras = prompt("Texto en Negritas", "");
if(negras) {
negras="[ b]"+negras+"[ /b]";
meter(negras);
}
break;
case "italics":
italics = prompt("Texto en Italicas", "");
if(italics) {
italics="[ i]"+italics+"[ /i]";
meter(italics);
}
break;
case "code":
code="[ code] [ /code]";
meter(code);
break;
case "quote":
quote="[ quote] [ /quote]";
meter(quote);
break;
default:
meter(accion);
break;
}
}

function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}
</script>
<form name="PostTopic">
Nombre de usuario:
<INPUT TYPE="text" NAME="UserName" SIZE="12" MAXLENGTH="25" VALUE='Kaopectate'>
Password:
<input maxLength="13" name="Password" size="12" type="password" VALUE='**********'>
Mensaje:
<textarea onKeyDown="textCounter(this.form.Message,this.form .remLen,2000);" onKeyUp="javascript:storeCaret(this); textCounter(this.form.Message,this.form.remLen,200 0);" name="Message" onchange="javascript:storeCaret(this);" onclick="javascript:storeCaret(this);" rows="10" wrap="VIRTUAL" cols="45">
</textarea>
<a href="javascript:codigo('url')">Enlace</a>
<a href="javascript:codigo('bold')">negrita</a>
<a href="javascript:codigo('italics')">italica</a>
<a href="javascript:codigo('code')">codigo</a>
<a href="javascript:codigo('quote')">citar</a>
Tiene
<input readonly type=text name=remLen size=5 maxlength=3 value="2000">
caracteres para su mensaje.
</form>
</BODY>
</HTML>

Saludos.

zeus_bsas · #6 (**permalink**) 19/11/2002, 20:31

Gracias, pero no entiendo una sola palabra...
Nadie tiene un Script que haga eso y nada mas?

Kaopectate · #7 (**permalink**) 19/11/2002, 20:42

Zeus_bsas, compadre, la idea inicial no es que te lo leas y lo entiendas, sino que lo coies en un documento en blanco, lo guardes como documento HTML y lo ejecutes.

Si se aproxima a lo que necesitas, te puedo indicar que pedazo exactamente es el que hace lo que necesitas.

Saludos.

zeus_bsas · #8 (**permalink**) 19/11/2002, 20:47

Lo hice, pero no es lo que necesito. Era exactamente lo de los smilies. O sea, lo que usan AHORA para poner smilies.
Como se hace

Y lo de la inclusion segura nadie lo sabe???
Porque el script para los smilies no esta en la pagina!

Kaopectate · #9 (**permalink**) 19/11/2002, 20:52

Lo de los smiles funciona exactamente igual, si seleccionas un smile de los que están a la izquierda de este textbox, se te expande dentro de tu mensaje una clave. Al momento de enviar el mensaje, se reemplaza esa marca por el tag <image> correspondiente. La mecánica es la misma.

Voy a ver la otra pregunta a la que haces referencia y si tengo algo que aportar te escribo.

Saludos.

zeus_bsas · #10 (**permalink**) 19/11/2002, 20:58

Estuve probando mejor el script, y funciona igual que el de caricatos

Las cosas se insertan siempre al final!!! Probalo.
Lo que yo quiero es que las cosas se inserten en donde esta el cursor, que puede ser el medio de una palabra. En este momento en los foros funciona asi y eso es lo que quiero lograr.

Kaopectate · #11 (**permalink**) 19/11/2002, 21:02

Que extraño, yo lo pruebo y me funciona. Estoy escribiendo un texto, luego posiciono el cursor a mitad del texto, selecciono negritas, escribo el texto que quiero en negritas, presiono aceptar y me aparece exactamente donde tenía el cursor.

¿Que estamos haciendo distinto?

zeus_bsas · #12 (**permalink**) 19/11/2002, 21:07

Sigo probando (hasta con negrita) y funciona igual. Use exactamente el mismo codigo que escribiste, va, solo modifique las palabras java script por javascript en los enlaces.

Kaopectate · #13 (**permalink**) 19/11/2002, 21:09

Déjame volver a extraer el código desde el mensaje a ver si está distinto del que tengo guardado...

Kaopectate · #14 (**permalink**) 19/11/2002, 21:11

De hecho te cuento que ese código no es otra cosa que el original del foro anterior que yo me lo bajé y lo recorté hasta obtener el mínimo que funcionara. Y en el foro anterior seguro que a ti te consta que funcionaba a la perfección...

Hago la prueba y te escribo...

Kaopectate · #15 (**permalink**) 19/11/2002, 21:16

Tenía un error, aqui va de nuevo:

Código PHP:

  <HTML>

 <HEAD>

 </HEAD>

 <BODY>

  <SCRIPT language="Javascript" type="text/javascript">

 
   // Este genial Script fue desarrollado por Tukzone, SirMatrix y Unknow, 

   // todos usuarios del Foro.. Gracias a ellos por su colaboración

 
  function storeCaret(text) { 

   if (text.createTextRange) {

    text.caretPos = document.selection.createRange().duplicate();

   }

  }

 
  function meter(text) {

   var postopic = document.PostTopic.Message;

   if (postopic.createTextRange && postopic.caretPos) {      

    var caretPos = postopic.caretPos;      

    caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;

   }

   else postopic.value += text;

   postopic.focus(caretPos)

  }

 
  function codigo(accion) {

   switch(accion) {

    case "url":

     url = prompt("URL de el Enlace", "http://");

     if(url) {

      url="[ a]"+url+"[ /a]";

      meter(url);

     }

     break;

    case "bold":

     negras = prompt("Texto en Negritas", "");

     if(negras) {

      negras="[ b]"+negras+"[ /b]";

      meter(negras);

     }

     break;

    case "italics":

     italics = prompt("Texto en Italicas", "");

     if(italics) {

      italics="[ i]"+italics+"[ /i]";

      meter(italics);

     }

     break;

    case "code":

     code="[ code]  [ /code]";

     meter(code);

     break;

    case "quote":

     quote="[ quote]  [ /quote]";

     meter(quote);

     break;

    default:

     meter(accion);

     break;

   }

  }

 
  function textCounter(field, countfield, maxlimit) {

   if (field.value.length > maxlimit)

    field.value = field.value.substring(0, maxlimit);

   else 

    countfield.value = maxlimit - field.value.length;

  }

 </script>

 <form name="PostTopic">

  Nombre de usuario:

  <INPUT TYPE="text" NAME="UserName" SIZE="12" MAXLENGTH="25" VALUE='Kaopectate'> 

  Password:

  <input maxLength="13" name="Password" size="12" type="password" VALUE='**********'>

  Mensaje:

  <textarea onKeyDown="textCounter(this.form.Message,this.form.remLen,2000);" onKeyUp="javascript:storeCaret(this); textCounter(this.form.Message,this.form.remLen,2000);" name="Message" onchange="javascript:storeCaret(this);" onclick="javascript:storeCaret(this);" rows="10" wrap="VIRTUAL" cols="45">

  </textarea>

  <a href="javascript:codigo('url')">Enlace</a> 

  <a href="javascript:codigo('bold')">negrita</a>

  <a href="javascript:codigo('italics')">italica</a> 

  <a href="javascript:codigo('code')">codigo</a>

  <a href="javascript:codigo('quote')">citar</a>

  Tiene

  <input readonly type=text name=remLen size=5 maxlength=3 value="2000">

  caracteres para su mensaje.

 </form>

</BODY>

</HTML>

Kaopectate · #16 (**permalink**) 19/11/2002, 21:20

En efecto, cuando hago post del código, en todos los sitios donde decía JavaScript, aparece java script, pero si reemplazo esa palabra me funciona.

zeus_bsas · #17 (**permalink**) 19/11/2002, 21:21

No se que pasa en tu maquina, pero a mi me sigue funcionando igual, siempre agrega al final. Lo probaste vos?

ALGUIEN PLEASE

Kaopectate · #18 (**permalink**) 19/11/2002, 21:23

No he dejado de probarlo una y otra vez. Bueno, esperemos que un tercero entre en este mensaje y nos diga si funciona o no.

zeus_bsas · #19 (**permalink**) 19/11/2002, 21:34

Por favor!!!!!!!!!!!!
Alguien tiene que tener el codigo posta!!!
Posteenlo please

caricatos · #20 (**permalink**) 20/11/2002, 01:48

Hola otra vez:

El código de la esta página lo he salvado y lo tengo en mi ordenador.
Cuando lo acomode y lo entienda algo mejor te lo mando.
Si usas explorer, guarda este archivo en "html", y en la carpeta de _archivos, esta un fichero javascript con el código. "addText()"

Saludos

caricatos · #21 (**permalink**) 20/11/2002, 11:52

Hola otra vez:

Parece ser algo así:

function poner(x) {
if (formulario.textarea.createTextRange
&& formulario.textarea.caretPos) {
var Posi = formulario.textarea.caretPos;
Posi.text = Posi.text.charAt(Posi.text.length - 1) == ' ' ? x + ' ' : x;
} else {
formulario.textarea.value += x;
}
formulario.textarea.focus();
}

Lo he podido hacer funcionar, pero la verdad es que no sé como...
De tods modos el código lo puse en el link que te mandé antes, y si lo pruebas, verás que funcion.

Saludos

Kaopectate · #22 (**permalink**) 20/11/2002, 12:01

Hola Caricatos.

Yo hice el mismo trabajo que tu pero con el foro anterior, y extraje un código que se puede probar directamente. Se lo publiqué a Zeus_bsas aqui mismo y a él no le funciona pero a mi si.

Mucho te agradecería que probaras lo que envié para saber que sucede.

En el fondo lo que tu publicas es lo mismo que lo que yo publico:

Una función es:

Código PHP:

  function poner(x) {

if (formulario.textarea.createTextRange 

&& formulario.textarea.caretPos) {

var Posi = formulario.textarea.caretPos;

Posi.text = Posi.text.charAt(Posi.text.length - 1) == ' ' ? x + ' ' : x;

} else {

formulario.textarea.value += x;

}

formulario.textarea.focus();

}

y la otra es:

Código PHP:

   function meter(text) {

   var postopic = document.PostTopic.Message;

   if (postopic.createTextRange && postopic.caretPos) {      

    var caretPos = postopic.caretPos;      

    caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;

   }

   else postopic.value += text;

   postopic.focus(caretPos)

  }

A mi me funciona...¿y a ti?

caricatos · #23 (**permalink**) 20/11/2002, 12:12

Hola Kaopectate:

Lo he probado y también me funciona. Voy a ver si encuentro información sobre createTextRange, porque parece "interesante"

Saludos

zeus_bsas · #24 (**permalink**) 20/11/2002, 14:52

Muchachos, gracias por la ayuda.
Los dos scripts me funcionan.
Kaopectate, no es que tu script no me funcione, lo que no me funciona es algo especifico del script y ya averigue que es: lo que no me andaba era insertar el smilie en la posicion del cursor (siempre me lo insertaba al final) y tampoco devolver el cursor a la misma posicion en donde se encontraba tras insertar.
Ya se porque pasa esto. El objeto elemento.CaretPos no esta disponible en Netscape, por lo que nunca se puede saber en este browser en que posicion estaba el cursor. En explorer funciona, pero en NN lo de la posicion del cursor no.

Ahora quedaria ver si existe alguna alternativa para NN para averiguar la posicion del cursor.

Kaopectate · #25 (**permalink**) 20/11/2002, 14:58

Buena la aclaratoria Zeus_bsas, ya me estaba viendo en la dificil situación de pelear por un código que no es mio con una persona que cree que le estoy imponiendo algo que no funciona.

Ahora, con respecto a lo de NN, creo que si la gente que planteó ese código (Tukzone, Sir Matrix y Unknown) no pudieron con NN debe ser por algo. Yo simplemente limpié y publiqué.

Saludos.

zeus_bsas · #26 (**permalink**) 20/11/2002, 20:10

Yo no pondria las manos en el fuego por nadie, diciendo que si no se hizo entonces no se puede hacer. Porque digo, hablas como si ellos fuesen los autores del script, y yo ya he bajado muchos ejemplos COMPLETAMENTE iguales, las funciones se llaman igual, y hasta las variables tambien! He visto paginas en ingles, y tambien en aleman! Por eso no creo que se haya creado aca el codigo, pero bueno, solo es eso, no CREO.

Por ejemplo, es esta pagina alemana hay scripts de varios usuarios con respecto a este tema, y uno de ellos es completamente igual.

http://baseportal.de/baseportal/base...150&Pos=6359.3

Te parece que esta gente, como otras personas habra venido hasta estos foros para saxcar el codigo?

epa2 · #27 (**permalink**) 21/11/2002, 05:26

me parece un post genial, enhorabuena chicos...

RootK · #28 (**permalink**) 21/11/2002, 09:05

Hola... todo bien... pero ahora .. como hago para que regrese el cursor a la posicion donde se quedo..??

P.D.- Si está posteado.. disculpen.. pero no lo ví..

Saludos

zeus_bsas · #29 (**permalink**) 21/11/2002, 11:13

RootK, este seria el script completo, con vuelta de cursor y todo:

Código:

<SCRIPT Language="JavaScript">
var text = "";
function storeCaret(text)
	{ 
	if (text.createTextRange)
		text.caretPos=document.selection.createRange().duplicate();
	}
	
function ingresar(text)
	{
	var campo=document.form1.mensaje;
	if (campo.createTextRange && campo.caretPos)    
		campo.caretPos.text=campo.caretPos.text.charAt(campo.caretPos.text.length - 1) == ' ' ? text + ' ' : text;
	else
		campo.value+=text;
	campo.focus(campo.caretPos);
	}
</SCRIPT>

Lo que se hace es generar un foco en base a un objeto (recordar que campo.CaretPos es uun objeto). Pero como dije, al parecer solo IE maneja este objeto.

epa2 · #30 (**permalink**) 21/11/2002, 11:38

perdonadme que me meta en el post, pero quiero hacer una pregunta, ¿esto lo estais haciendo para php o asp?

Disculpad la intromisión