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