Marcar texto en un TextField
Necesito crear un mini editor de texto web, que en tiempo de ejecución el usuario escriba (por ejemplo)en un textfield y seleccione parte de este con la finalidad de marcarlo, poner una parte de texto en negrita, otra en cursiva,...
No es tan importante que ello vea como que me llegue a mi la información. Preferentemente hacerlo en JavaScript
Saludos
Gracias
No es tan importante que ello vea como que me llegue a mi la información. Preferentemente hacerlo en JavaScript
Saludos
Gracias
1 Respuesta
Respuesta de luixn
1
No se si entendí bien tu duda
Se trata de que al escribir el usuario una texto, una serie de palabras clave predefinidas por ti, te serian enviadas por mail resaltadas.
Te paso unos jvscripts de validación de datos en los que solo tienes que cambiar las palabras clave para validar y en tu caso en vez de validar true o false lo cambias para que te resalte / subraye o deje el texto =
---------------------------------------------------------
<HTML>
<HEAD>
<TITLE>Verificacion de campos y envio</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function runTest(form, button) {
Ret = false;
if (button.name == "1") Ret = testBox1(form);
if (button.name == "2") Ret = testBox2(form);
if (button.name == "3") Ret = testBox3(form);
if (button.name == "4") Ret = testBox4(form);
if (Ret)
alert ("Campo correcto!");
}
function testBox1(form) {
Ctrl = form.campo1;
if (Ctrl.value == "" || Ctrl.value.indexOf ('@', 0) == -1) {
validatePrompt (Ctrl, "Entrar un E-mail")
return (false);
} else
return (true);
}
function testBox2(form) {
Ctrl = form.campo2;
if (Ctrl.value.length != 5) {
validatePrompt (Ctrl, "Entrar cinco caracteres")
return (false);
} else
return (true);
}
function testBox3(form) {
Ctrl = form.campo3;
if (Ctrl.value.length < 3) {
validatePrompt (Ctrl, "Entrar tres o mas caracteres")
return (false);
} else
return (true);
}
function testBox4(form) {
Ctrl = form.campo4;
if (Ctrl.value == "") {
validatePrompt (Ctrl, "Entrar cualquier cosa")
return (false);
} else
return (true);
}
function runSubmit (form, button) {
if (!testBox1(form)) return;
if (!testBox2(form)) return;
if (!testBox3(form)) return;
if (!testBox4(form)) return;
alert ("Todos los campos OK! Se procede a enviar");
document.test.submit();
}
function validatePrompt (Ctrl, PromptStr) {
alert (PromptStr)
Ctrl.focus();
return;
}
function loadDoc() {
// initial focus; use if needed
document.test.campo1.focus ();
return;
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff" TEXT="#000000" LINK="#8000FF" VLINK="#3AAFAF" onLoad="loadDoc()">
<font size="+2"><b><i>Validación de datos más envio al servidor</b></i></font><p>
<CENTER>
<H3>Verificación de campos en un formulario con JavaScript.<BR> Envio a un servidor.</H3></CENTER>
<center>
<FORM NAME="test" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" METHOD=GET>
<table border>
<tr>
<td>Entra tu E-mail (p.ej.: [email protected]):</td>
<td><INPUT TYPE="text" NAME="campo1"></td>
<td><INPUT TYPE="button" NAME="1" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td>Entrar cinco caracteres: </td>
<td><INPUT TYPE="text" NAME="campo2"></td>
<td><INPUT TYPE="button" NAME="2" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td>Entrar tres o más caracteres:</td>
<td><INPUT TYPE="text" NAME="campo3"></td>
<td><INPUT TYPE="button" NAME="3" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td>Entrar cualquier cosa:</td>
<td><INPUT TYPE="text" NAME="campo4"></td>
<td><INPUT TYPE="button" NAME="4" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td align=center><INPUT TYPE="button" NAME="Tfin" VALUE="Test final + envio" onClick="runSubmit(this.form, this)"></td>
<td align=center><input type="reset" name="reset"
value="Inicializar" onClick="this.form.campo1.value = ''"></td>
</tr>
</FORM>
</table>
</center>
<a href="index.htm#validat2">Volver</a>
</BODY>
</HTML>
----------------------------------------------------------
<HTML>
<HEAD>
<TITLE>Validación digito a digito</TITLE></HEAD>
<BODY bgcolor="#ffffff" TEXT="#000000" LINK="#8000FF" VLINK="#3AAFAF">
<SCRIPT LANGUAGE="JavaScript">
// Esta funcion, disennada por Gordon McComb http://www.gnmcomb.com/
// de su libro sobre Comercio Electronico
function mask (InString, Mask) {
LenStr = InString.length;
LenMsk = Mask.length;
if ((LenStr==0) || (LenMsk==0))
return(false);
if (LenStr!=LenMsk)
return(false);
TempString=""
for (Count=0; Count<=InString.length; Count++) {
StrChar = InString.substring(Count, Count+1);
MskChar = Mask.substring(Count, Count+1);
if (MskChar=='#') {
if(!isNumberChar(StrChar))
return(false);
}
else if (MskChar=='?') {
if(!isAlphabeticChar(StrChar))
return(false);
}
else if (MskChar=='!') {
if(!isNumOrChar(StrChar))
return(false);
}
else if (MskChar=='*') {
}
else {
if (MskChar!=StrChar)
return(false);
}
}
return (true);
}
function isAlphabeticChar (InString) {
if(InString.length!=1)
return (false);
InString=InString.toLowerCase();
RefString="abcdefghijklmnopqrstuvwxyz";
if (RefString.indexOf (InString.toLowerCase(), 0)==-1)
return (false);
return (true);
}
function isNumberChar (InString) {
if(InString.length!=1)
return (false);
RefString="1234567890";
if (RefString.indexOf (InString, 0)==-1)
return (false);
return (true);
}
function isNumOrChar (InString) {
if(InString.length!=1)
return (false);
InString=InString.toLowerCase();
RefString="1234567890abcdefghijklmnopqrstuvwxyz";
if (RefString.indexOf (InString, 0)==-1)
return (false);
return (true);
}
</SCRIPT>
<Font Size=+2><I><B>Validación de datos digito a digito</B></I></font><BR><BR>
<BLOCKQUOTE>Lo que ves es lo que hay, no tiene explicación de como funciona pero es interesante
para validar datos digito a digito, lo que no te podra validar son los caracteres que hacen de
comodin como son el <b>#</b>, el <b>? </b> y el <b>! </b>.
</BLOCKQUOTE>
<CENTER>
<FORM NAME="test">
Ingrese formato (#: números, ?:letras, !:letras o números):<BR>
<INPUT TYPE="text" NAME="masking" VALUE="(###) ###-####"><P>
Ingrese el string que desea validar:<BR>
<INPUT TYPE="text" NAME="input" VALUE="(800) 555-1212"><P>
<INPUT TYPE="button" onClick="this.form.output.value=mask(this.form.input.value, this.form.masking.value)"
VALUE="Ejecutar Validación"><P>
Resultado de la función:<BR>
<INPUT TYPE="text" NAME="output" VALUE="">
</FORM>
</CENTER>
<a href="index.htm#validat3">Volver</a>
</BODY>
</HTML>
-----------------------------------------------------------
Se trata de que al escribir el usuario una texto, una serie de palabras clave predefinidas por ti, te serian enviadas por mail resaltadas.
Te paso unos jvscripts de validación de datos en los que solo tienes que cambiar las palabras clave para validar y en tu caso en vez de validar true o false lo cambias para que te resalte / subraye o deje el texto =
---------------------------------------------------------
<HTML>
<HEAD>
<TITLE>Verificacion de campos y envio</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function runTest(form, button) {
Ret = false;
if (button.name == "1") Ret = testBox1(form);
if (button.name == "2") Ret = testBox2(form);
if (button.name == "3") Ret = testBox3(form);
if (button.name == "4") Ret = testBox4(form);
if (Ret)
alert ("Campo correcto!");
}
function testBox1(form) {
Ctrl = form.campo1;
if (Ctrl.value == "" || Ctrl.value.indexOf ('@', 0) == -1) {
validatePrompt (Ctrl, "Entrar un E-mail")
return (false);
} else
return (true);
}
function testBox2(form) {
Ctrl = form.campo2;
if (Ctrl.value.length != 5) {
validatePrompt (Ctrl, "Entrar cinco caracteres")
return (false);
} else
return (true);
}
function testBox3(form) {
Ctrl = form.campo3;
if (Ctrl.value.length < 3) {
validatePrompt (Ctrl, "Entrar tres o mas caracteres")
return (false);
} else
return (true);
}
function testBox4(form) {
Ctrl = form.campo4;
if (Ctrl.value == "") {
validatePrompt (Ctrl, "Entrar cualquier cosa")
return (false);
} else
return (true);
}
function runSubmit (form, button) {
if (!testBox1(form)) return;
if (!testBox2(form)) return;
if (!testBox3(form)) return;
if (!testBox4(form)) return;
alert ("Todos los campos OK! Se procede a enviar");
document.test.submit();
}
function validatePrompt (Ctrl, PromptStr) {
alert (PromptStr)
Ctrl.focus();
return;
}
function loadDoc() {
// initial focus; use if needed
document.test.campo1.focus ();
return;
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff" TEXT="#000000" LINK="#8000FF" VLINK="#3AAFAF" onLoad="loadDoc()">
<font size="+2"><b><i>Validación de datos más envio al servidor</b></i></font><p>
<CENTER>
<H3>Verificación de campos en un formulario con JavaScript.<BR> Envio a un servidor.</H3></CENTER>
<center>
<FORM NAME="test" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" METHOD=GET>
<table border>
<tr>
<td>Entra tu E-mail (p.ej.: [email protected]):</td>
<td><INPUT TYPE="text" NAME="campo1"></td>
<td><INPUT TYPE="button" NAME="1" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td>Entrar cinco caracteres: </td>
<td><INPUT TYPE="text" NAME="campo2"></td>
<td><INPUT TYPE="button" NAME="2" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td>Entrar tres o más caracteres:</td>
<td><INPUT TYPE="text" NAME="campo3"></td>
<td><INPUT TYPE="button" NAME="3" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td>Entrar cualquier cosa:</td>
<td><INPUT TYPE="text" NAME="campo4"></td>
<td><INPUT TYPE="button" NAME="4" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td align=center><INPUT TYPE="button" NAME="Tfin" VALUE="Test final + envio" onClick="runSubmit(this.form, this)"></td>
<td align=center><input type="reset" name="reset"
value="Inicializar" onClick="this.form.campo1.value = ''"></td>
</tr>
</FORM>
</table>
</center>
<a href="index.htm#validat2">Volver</a>
</BODY>
</HTML>
----------------------------------------------------------
<HTML>
<HEAD>
<TITLE>Validación digito a digito</TITLE></HEAD>
<BODY bgcolor="#ffffff" TEXT="#000000" LINK="#8000FF" VLINK="#3AAFAF">
<SCRIPT LANGUAGE="JavaScript">
// Esta funcion, disennada por Gordon McComb http://www.gnmcomb.com/
// de su libro sobre Comercio Electronico
function mask (InString, Mask) {
LenStr = InString.length;
LenMsk = Mask.length;
if ((LenStr==0) || (LenMsk==0))
return(false);
if (LenStr!=LenMsk)
return(false);
TempString=""
for (Count=0; Count<=InString.length; Count++) {
StrChar = InString.substring(Count, Count+1);
MskChar = Mask.substring(Count, Count+1);
if (MskChar=='#') {
if(!isNumberChar(StrChar))
return(false);
}
else if (MskChar=='?') {
if(!isAlphabeticChar(StrChar))
return(false);
}
else if (MskChar=='!') {
if(!isNumOrChar(StrChar))
return(false);
}
else if (MskChar=='*') {
}
else {
if (MskChar!=StrChar)
return(false);
}
}
return (true);
}
function isAlphabeticChar (InString) {
if(InString.length!=1)
return (false);
InString=InString.toLowerCase();
RefString="abcdefghijklmnopqrstuvwxyz";
if (RefString.indexOf (InString.toLowerCase(), 0)==-1)
return (false);
return (true);
}
function isNumberChar (InString) {
if(InString.length!=1)
return (false);
RefString="1234567890";
if (RefString.indexOf (InString, 0)==-1)
return (false);
return (true);
}
function isNumOrChar (InString) {
if(InString.length!=1)
return (false);
InString=InString.toLowerCase();
RefString="1234567890abcdefghijklmnopqrstuvwxyz";
if (RefString.indexOf (InString, 0)==-1)
return (false);
return (true);
}
</SCRIPT>
<Font Size=+2><I><B>Validación de datos digito a digito</B></I></font><BR><BR>
<BLOCKQUOTE>Lo que ves es lo que hay, no tiene explicación de como funciona pero es interesante
para validar datos digito a digito, lo que no te podra validar son los caracteres que hacen de
comodin como son el <b>#</b>, el <b>? </b> y el <b>! </b>.
</BLOCKQUOTE>
<CENTER>
<FORM NAME="test">
Ingrese formato (#: números, ?:letras, !:letras o números):<BR>
<INPUT TYPE="text" NAME="masking" VALUE="(###) ###-####"><P>
Ingrese el string que desea validar:<BR>
<INPUT TYPE="text" NAME="input" VALUE="(800) 555-1212"><P>
<INPUT TYPE="button" onClick="this.form.output.value=mask(this.form.input.value, this.form.masking.value)"
VALUE="Ejecutar Validación"><P>
Resultado de la función:<BR>
<INPUT TYPE="text" NAME="output" VALUE="">
</FORM>
</CENTER>
<a href="index.htm#validat3">Volver</a>
</BODY>
</HTML>
-----------------------------------------------------------
Gracias por tu interés, pero tal vez me exprese mal. Necesito que el usuario escriba lo que el quiera y pueda marcarlo, en negrita, cursiva,... u otra marca de tipo xml, pero sin necesidad de escribir la marca, sólo apretando unos botones o algo similar. Después me debe de llegar todo el texto marcado. A priori el texto es abierto,...
Oks
komprendido, ahora si kreo k estamos por el buen camino, la verdad k me venia grande tu pregunta :)pero dimos kon la solucion en una pagina brasileña www.asparena.eti.br
<HTML>
<HEAD>
<TITLE> www.asparena.eti.br </TITLE>
<script language=javascript>
function SelText(){
// pegando o texto selecionado
var meuTexto = document.selection.createRange().text;
//texto original
var textoOriginal = document.testef.lala.value;
//novo texto
var meuNTexto = "";
var textoFormatado = "";
var meuNTextoI = "";
var meuNTextoF = "";
// verifica se tem algo selecionado
if (meuTexto.length == 0){
alert ("Selecione algo");
}else{
//aplica a formatacao escolhida
//negrito
if (document.testef.fNegrito.checked) {
meuNTextoI = "<b>";
meuNTextoF = "</b>";
}
//itálico
if (document.testef.fItalico.checked) {
meuNTextoI += "<i>";
meuNTextoF += "</i>";
}
//sublinhado
if (document.testef.fSublinhado.checked) {
meuNTextoI += "<u>";
meuNTextoF += "</u>";
}
//texto final
meuNTexto = meuNTextoI + meuTexto + meuNTextoF;
//substitui o texto antigo com o novo, formatado
textoFormatado = (textoOriginal.replace(meuTexto, meuNTexto));
document.testef.seleca.value = textoFormatado;
}
Visualizar(textoFormatado);
}
//insere no div o texto formatado para visualização HTML
function Visualizar(fTexto){
visual.innerHTML = fTexto;
}
</script>
</HEAD>
<BODY>
<form name=testef>
Selecione o estilo: <P>
<input type=checkbox name=fNegrito value="s"> Negrito<P>
<input type=checkbox name=fItalico value="s"> Itálico<P>
<input type=checkbox name=fSublinhado value="s"> Sublinhado<P>
Insira seu texto:<textarea name=lala> </textarea><P>
Código HTML<input type=text name=seleca size=50><P>
<input type=button onClick=SelText(); value=Visualizar>
</form>
Texto formatado:<div id=visual border=2>
</div>
</BODY>
</HTML>
Saludos
Luixn
www.mexdesign.com
komprendido, ahora si kreo k estamos por el buen camino, la verdad k me venia grande tu pregunta :)pero dimos kon la solucion en una pagina brasileña www.asparena.eti.br
<HTML>
<HEAD>
<TITLE> www.asparena.eti.br </TITLE>
<script language=javascript>
function SelText(){
// pegando o texto selecionado
var meuTexto = document.selection.createRange().text;
//texto original
var textoOriginal = document.testef.lala.value;
//novo texto
var meuNTexto = "";
var textoFormatado = "";
var meuNTextoI = "";
var meuNTextoF = "";
// verifica se tem algo selecionado
if (meuTexto.length == 0){
alert ("Selecione algo");
}else{
//aplica a formatacao escolhida
//negrito
if (document.testef.fNegrito.checked) {
meuNTextoI = "<b>";
meuNTextoF = "</b>";
}
//itálico
if (document.testef.fItalico.checked) {
meuNTextoI += "<i>";
meuNTextoF += "</i>";
}
//sublinhado
if (document.testef.fSublinhado.checked) {
meuNTextoI += "<u>";
meuNTextoF += "</u>";
}
//texto final
meuNTexto = meuNTextoI + meuTexto + meuNTextoF;
//substitui o texto antigo com o novo, formatado
textoFormatado = (textoOriginal.replace(meuTexto, meuNTexto));
document.testef.seleca.value = textoFormatado;
}
Visualizar(textoFormatado);
}
//insere no div o texto formatado para visualização HTML
function Visualizar(fTexto){
visual.innerHTML = fTexto;
}
</script>
</HEAD>
<BODY>
<form name=testef>
Selecione o estilo: <P>
<input type=checkbox name=fNegrito value="s"> Negrito<P>
<input type=checkbox name=fItalico value="s"> Itálico<P>
<input type=checkbox name=fSublinhado value="s"> Sublinhado<P>
Insira seu texto:<textarea name=lala> </textarea><P>
Código HTML<input type=text name=seleca size=50><P>
<input type=button onClick=SelText(); value=Visualizar>
</form>
Texto formatado:<div id=visual border=2>
</div>
</BODY>
</HTML>
Saludos
Luixn
www.mexdesign.com
Gracias de nuevo, pero esta tampoco es la solución. En primer lugar textRange solo funciona con IE, por lo que hay que buscar una alternativa.
Gracias
Gracias
Siento no haber podido darte con la solución, creo que deberías preguntar a alguien con más experiencia en Jscript :(, te aconsejo que mires en el panel de expertos de esta materia,
te paso un par de páginas más donde puedes intentar encontrar la solución, la cual me gustaría me enviases si no fuese molestia.
w w w. x p e r t i a . c o m
m x. w e t e l l y o u . c o m
Tuve que darles espacios a las urls para que medejase enviarlas, por ser de la competencia :)
lo siento
saludos
luixn
te paso un par de páginas más donde puedes intentar encontrar la solución, la cual me gustaría me enviases si no fuese molestia.
w w w. x p e r t i a . c o m
m x. w e t e l l y o u . c o m
Tuve que darles espacios a las urls para que medejase enviarlas, por ser de la competencia :)
lo siento
saludos
luixn
He encontrado algunas pçaginas en las que hay un minieditor. Pero las soluciones son con la propiedad textmodified=true, que permite editar el texto. Pero con NS no sirve; para este he encontrado una solución con ! 32 páginas de código!
