2008-09-10 17 views
10

Quiero insertar algunos caracteres especiales en el cursor dentro de los cuadros de texto usando javascript en un botón. ¿Cómo puede hacerse esto?¿Cómo inserto un carácter en el símbolo de intercalación con javascript?

La secuencia de comandos debe encontrar el cuadro de texto activo e insertar el carácter en el símbolo de intercalación en ese cuadro de texto. La secuencia de comandos también debe funcionar en IE y Firefox.

EDIT: También está bien insertar el carácter "último" en el cuadro de texto previamente activo.

Respuesta

1

Tenga en cuenta que si el usuario presiona un botón, el foco en el cuadro de texto se perderá y no habrá una posición de intercalación.

+0

No estoy seguro de lo que está tratando de decir. Como muestra mi ejemplo, puede obtener la posición del cursor incluso desde un elemento que no tiene foco. – bmb

0

bucle sobre todo lo que los campos de entrada ... de encontrar el que tiene el foco .. continuación, una vez que tenga el área de texto ... usted debería ser capaz de hacer algo así ...

myTextArea .value = 'texto para insertar en el área de texto va aquí';

0

No estoy seguro si puede capturar la posición de intercalación, pero si puede, puede evitar la preocupación de Jason Cohen al capturar la ubicación (en relación con la cadena) utilizando el evento onblur del cuadro de texto.

1

A la luz de su actualización

var inputs = document.getElementsByTagName('input'); 
var lastTextBox = null; 

for(var i = 0; i < inputs.length; i++) 
{ 
    if(inputs[i].getAttribute('type') == 'text') 
    { 
    inputs[i].onfocus = function() { 
     lastTextBox = this; 
    } 
    } 
} 

var button = document.getElementById("YOURBUTTONID"); 
button.onclick = function() { 
    lastTextBox.value += 'PUTYOURTEXTHERE'; 
} 
3

creo que Jason Cohen es incorrecta. La posición de intercalación se conserva cuando se pierde el foco.

[Editar : Añadido código para Firefox que no tenía originalmente.]

[Editar :. Añadido código para determinar el cuadro de texto activo más reciente]

En primer lugar, puede usar el evento onBlur de cada cuadro de texto para establecer una variable a "esto" para que siempre conozca el cuadro de texto activo más reciente.

Luego, hay una forma de IE para obtener la posición del cursor que también funciona en Opera, y de una manera más fácil en Firefox.

En IE el concepto básico es utilizar el objeto document.selection y poner algo de texto en la selección. Luego, usando indexOf, puede obtener la posición del texto que ha agregado.

En FireFox, hay un método llamado selectionStart que le dará la posición del cursor.

Una vez que tenga la posición del cursor, se sobrescribe todo el text.value con

texto antes de la posición del cursor + el texto que desea insertar el texto + después de la posición del cursor

Aquí hay un ejemplo con enlaces separados para IE y FireFox. Puede usar su método de detección de navegador favorito para averiguar qué código ejecutar.

<html><head></head><body> 

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

var lasttext; 

function doinsert_ie() { 
    var oldtext = lasttext.value; 
    var marker = "##MARKER##"; 
    lasttext.focus(); 
    var sel = document.selection.createRange(); 
    sel.text = marker; 
    var tmptext = lasttext.value; 
    var curpos = tmptext.indexOf(marker); 
    pretext = oldtext.substring(0,curpos); 
    posttest = oldtext.substring(curpos,oldtext.length); 
    lasttext.value = pretext + "|" + posttest; 
} 

function doinsert_ff() { 
    var oldtext = lasttext.value; 
    var curpos = lasttext.selectionStart; 
    pretext = oldtext.substring(0,curpos); 
    posttest = oldtext.substring(curpos,oldtext.length); 
    lasttext.value = pretext + "|" + posttest; 
} 

--> 
</script> 


<form name="testform"> 
<input type="text" name="testtext1" onBlur="lasttext=this;"> 
<input type="text" name="testtext2" onBlur="lasttext=this;"> 
<input type="text" name="testtext3" onBlur="lasttext=this;"> 

</form> 
<a href="#" onClick="doinsert_ie();">Insert IE</a> 
<br> 
<a href="#" onClick="doinsert_ff();">Insert FF</a> 
</body></html> 

Esto también funcionará con textareas. No sé cómo reposicionar el cursor para que permanezca en el punto de inserción.

+0

En FF 4 esto se puede hacer con 'elem.setSelectionRange (from, to)' y usando el mismo valor para 'from' y 'to', puede usar el curpos var + la longitud de la cadena insertada como lo siguiente: ' elem.setSelectionRange (curpos + newstring.length, curpos + newstring.length) 'suponiendo que se utiliza cadena de noticias en lugar de la tubería. No sé cómo lograr esto en IE sin embargo ... Y no he probado esto en ningún otro navegador ... – Flatline

0

Una versión descuartizado de código @bmb en respuesta anterior funciona bien para volver a colocar el cursor al final de caracteres insertados también:

var lasttext; 

function doinsert_ie() { 
var ttInsert = "bla"; 
lasttext.focus(); 
var sel = document.selection.createRange(); 
sel.text = ttInsert; 
sel.select(); 
} 

function doinsert_ff() { 
var oldtext = lasttext.value; 
var curposS = lasttext.selectionStart; 
var curposF = lasttext.selectionEnd; 
pretext = oldtext.substring(0,curposS); 
posttest = oldtext.substring(curposF,oldtext.length); 
var ttInsert='bla'; 
lasttext.value = pretext + ttInsert + posttest; 
lasttext.selectionStart=curposS+ttInsert.length; 
lasttext.selectionEnd=curposS+ttInsert.length; 
} 
Cuestiones relacionadas