Insertar contenido html dinamicamente en la posición del cursor
amagea
07 de Diciembre del 2005
Perdón, antes he enviado un asunto incompleto.
Hola, me gustaría saber si es posible insertar dinámicamente, o sea, una vez ya cargada la pag html,
algún componente html (texto, imagen,...) en el lugar donde esté el cursor en ese momento.
Lo he intentado con document.selection.createRange(), pero esto sólo me vale para cuando tengo seleccionado algo.
yo lo quiero hacer aun cuando no tengamos nada seleccionado, sino sólo el cursor posicionado en alguna parte de la pag html.
¿alguien me puede ayudar ?
Muchas Gracias.
Hola, me gustaría saber si es posible insertar dinámicamente, o sea, una vez ya cargada la pag html,
algún componente html (texto, imagen,...) en el lugar donde esté el cursor en ese momento.
Lo he intentado con document.selection.createRange(), pero esto sólo me vale para cuando tengo seleccionado algo.
yo lo quiero hacer aun cuando no tengamos nada seleccionado, sino sólo el cursor posicionado en alguna parte de la pag html.
¿alguien me puede ayudar ?
Muchas Gracias.
amagea
07 de Diciembre del 2005
analiza esta página y verás la respuesta:
__________________
<HTML>
<HEAD>
<SCRIPT>
//****************************************************************
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
//****************************************************************
function resetCaret (textEl) {
if (textEl.createTextRange)
{
setCaretToEnd(textEl);
}
}
//****************************************************************
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else
{
textEl.value = text;
}
//resetCaret(textEl);
}
//****************************************************************
function setCaretToEnd (control) {
if (control.createTextRange) {
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange) {
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
storeCaret(control);
}
//****************************************************************
function setCaretToStart (control) {
if (control.createTextRange) {
var range = control.createTextRange();
range.collapse(true);
range.select();
}
else if (control.setSelectionRange) {
control.focus();
control.setSelectionRange(0, 0);
}
storeCaret(control);
}
//****************************************************************
function ejecuta(txtJS)
{
eval(txtJS);
}
//****************************************************************
function busca(txt)
{
var tr=document.aForm.aTextArea.createTextRange();
var existe=tr.findText(txt);
tr.select();
alert("El resultado de buscar el texto -"+txt+"- ha sido = "+existe);
}
//****************************************************************
function compruebaFoco(txt)
{
alert("padreSel.name="+padreSel().name);
if(padreSel().name==txt)
{
alert("foco en "+txt);
}
else
{
alert("foco no en "+txt+" sino en "+padreSel().name);
}
}
//****************************************************************
function expandirTR(unidad)
{
var tr=document.aForm.aTextArea.createTextRange();
tr.expand(unidad);
tr.select();
}
//****************************************************************
function exp()
{
var rng = document.selection.createRange();
rng.expand("word");
rng.select();
}
//****************************************************************
function traza()
{
var rng = document.selection.createRange();
var padre=rng.parentElement();
padre=document.activeElement;
alert("PADRE=" +padre.name);
}
//****************************************************************
function padreSel()
{
if(document.selection)
{
return document.selection.createRange().parentElement();
}
else
{
return document.body;
}
}
//****************************************************************
function cambiaCursorW()
{
//alert("inicio ondrag");
document.body.style.cursor='wait';
}
//****************************************************************
function resetCursor()
{
//alert("inicio ondrop");
document.body.style.cursor='pointer';
}
//****************************************************************
function dimeFoco()
{
//alert("el foco lo tiene "+document.activeElement.name);
var padre=document.selection.createRange().duplicate().parentElement();
var nombre=padre.name;
alert("foco="+nombre);
}
//****************************************************************
</SCRIPT>
</HEAD>
<BODY>
<div align="center">
<h3>Página donde se muestra cómo insertar código en la posición del cursor dentro de un TextArea,<br>
así como posicionar el cursor al final y al inicio del texto de un TextArea.</h3>
</div>
<h5>(caret==cursor)</h5>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);" ONDBLCLICK="storeCaret(this);" >
Posiciona el cursor en el lugar donde
quieras introducir el texto del text box de abajo.
</TEXTAREA>
<BR>
<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="Scriptology">
<BR>
<INPUT TYPE="button" VALUE="insert at caret" ONCLICK="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
<input type="button" value="move caret to end" onclick="setCaretToEnd(this.form.elements.aTextArea);">
<input type="button" value="move caret to start" onclick="setCaretToStart(this.form.elements.aTextArea);">
<br>
<input type="text" name="buscado" size="60" value="Introduzca texto a buscar en el TextArea">
<input type="button" value="Buscar Texto" onclick="busca(document.aForm.buscado.value)">
<br>
<input type="text" name="js" size="100" value="Introduzca código Javascript">
<input type="button" value="Ejecuta Javascritp" onclick="ejecuta(document.aForm.js.value)">
<br>
<input type="text" name="uni" size="40" value="Introduzca unidad de expansión">
<input type="button" value="Expande textRange" onclick="expandirTR(document.aForm.uni.value)">
<br>
<input type="text" name="foc" size="40" value="">
<input type="button" name="botonFoc" value="Comprueba Foco" onfocusin="compruebaFoco(document.aForm.foc.value)" onfocus="alert('tengo el foco')">
<br>
<input type="button" value="Expande" onclick="exp()">
<br>
<input type="button" value="Traza" name="botonTraza" onclick="traza()">
<br>
<input type="button" value="dimeFoco" name="botondimefoco" onfocusin="dimeFoco()">
</FORM>
<script type="text/javascript">
<!--
//-->
</script>
</BODY>
</HTML>
__________________
<HTML>
<HEAD>
<SCRIPT>
//****************************************************************
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
//****************************************************************
function resetCaret (textEl) {
if (textEl.createTextRange)
{
setCaretToEnd(textEl);
}
}
//****************************************************************
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else
{
textEl.value = text;
}
//resetCaret(textEl);
}
//****************************************************************
function setCaretToEnd (control) {
if (control.createTextRange) {
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange) {
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
storeCaret(control);
}
//****************************************************************
function setCaretToStart (control) {
if (control.createTextRange) {
var range = control.createTextRange();
range.collapse(true);
range.select();
}
else if (control.setSelectionRange) {
control.focus();
control.setSelectionRange(0, 0);
}
storeCaret(control);
}
//****************************************************************
function ejecuta(txtJS)
{
eval(txtJS);
}
//****************************************************************
function busca(txt)
{
var tr=document.aForm.aTextArea.createTextRange();
var existe=tr.findText(txt);
tr.select();
alert("El resultado de buscar el texto -"+txt+"- ha sido = "+existe);
}
//****************************************************************
function compruebaFoco(txt)
{
alert("padreSel.name="+padreSel().name);
if(padreSel().name==txt)
{
alert("foco en "+txt);
}
else
{
alert("foco no en "+txt+" sino en "+padreSel().name);
}
}
//****************************************************************
function expandirTR(unidad)
{
var tr=document.aForm.aTextArea.createTextRange();
tr.expand(unidad);
tr.select();
}
//****************************************************************
function exp()
{
var rng = document.selection.createRange();
rng.expand("word");
rng.select();
}
//****************************************************************
function traza()
{
var rng = document.selection.createRange();
var padre=rng.parentElement();
padre=document.activeElement;
alert("PADRE=" +padre.name);
}
//****************************************************************
function padreSel()
{
if(document.selection)
{
return document.selection.createRange().parentElement();
}
else
{
return document.body;
}
}
//****************************************************************
function cambiaCursorW()
{
//alert("inicio ondrag");
document.body.style.cursor='wait';
}
//****************************************************************
function resetCursor()
{
//alert("inicio ondrop");
document.body.style.cursor='pointer';
}
//****************************************************************
function dimeFoco()
{
//alert("el foco lo tiene "+document.activeElement.name);
var padre=document.selection.createRange().duplicate().parentElement();
var nombre=padre.name;
alert("foco="+nombre);
}
//****************************************************************
</SCRIPT>
</HEAD>
<BODY>
<div align="center">
<h3>Página donde se muestra cómo insertar código en la posición del cursor dentro de un TextArea,<br>
así como posicionar el cursor al final y al inicio del texto de un TextArea.</h3>
</div>
<h5>(caret==cursor)</h5>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);" ONDBLCLICK="storeCaret(this);" >
Posiciona el cursor en el lugar donde
quieras introducir el texto del text box de abajo.
</TEXTAREA>
<BR>
<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="Scriptology">
<BR>
<INPUT TYPE="button" VALUE="insert at caret" ONCLICK="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
<input type="button" value="move caret to end" onclick="setCaretToEnd(this.form.elements.aTextArea);">
<input type="button" value="move caret to start" onclick="setCaretToStart(this.form.elements.aTextArea);">
<br>
<input type="text" name="buscado" size="60" value="Introduzca texto a buscar en el TextArea">
<input type="button" value="Buscar Texto" onclick="busca(document.aForm.buscado.value)">
<br>
<input type="text" name="js" size="100" value="Introduzca código Javascript">
<input type="button" value="Ejecuta Javascritp" onclick="ejecuta(document.aForm.js.value)">
<br>
<input type="text" name="uni" size="40" value="Introduzca unidad de expansión">
<input type="button" value="Expande textRange" onclick="expandirTR(document.aForm.uni.value)">
<br>
<input type="text" name="foc" size="40" value="">
<input type="button" name="botonFoc" value="Comprueba Foco" onfocusin="compruebaFoco(document.aForm.foc.value)" onfocus="alert('tengo el foco')">
<br>
<input type="button" value="Expande" onclick="exp()">
<br>
<input type="button" value="Traza" name="botonTraza" onclick="traza()">
<br>
<input type="button" value="dimeFoco" name="botondimefoco" onfocusin="dimeFoco()">
</FORM>
<script type="text/javascript">
<!--
//-->
</script>
</BODY>
</HTML>
javi-on
07 de Diciembre del 2005
Muy bueno, gracias. Estaba buscando algo así.
Vhs
07 de Diciembre del 2005
esta super bueno,
pero funciona solo En IE no en firefox
pero funciona solo En IE no en firefox
