Cómo mover la ventana de la ventana de texto al obtener el foco?

Question

Tengo un cuadro de texto que puede contener cadenas más grandes que el tamaño del cuadro de texto. Cuando estoy escribiendo, el cuadro de texto "viewport" siempre se mueve para mostrar el último carácter que escribí (por ejemplo, cuando escribe un título muy grande en una pregunta SO). a

El problema es que si el texbox pierde el foco, cuando se enfoca de nuevo, la ventana gráfica siempre se establece al comienzo del texto, y yo la quiero al final.

He intentado mover el símbolo de acceso programáticamente al final del texto y funciona, pero la ventana todavía está al principio del texto, por lo que el usuario todavía tiene que presionar cualquier tecla para mover la ventana al final del texto.

Ejemplo

Este es el cuadro de texto antes de perder el foco:

alt text http://img35.imageshack.us/img35/6697/10437837.jpg

Y esto después se pierde el enfoque:

alt text http://img11.imageshack.us/img11/1390/33816597.jpg

me gustaría que cuando el txtbox vuelve a enfocar la ventana gráfica se establece como en la primera imagen.

¿Es posible hacer esto?

Answer 1

Sry, pero no creo que sea posible. Al menos no de una manera limpia y consistente con el navegador.

Answer 2

Una forma de que sea un poco hack-y sería volver a cargar dinámicamente el cuadro de texto después de perder el foco.

Simplemente almacene la cadena en una variable y elimine el campo de texto, luego agréguelo de nuevo con $ .html() o el método que desee con la cadena que contiene.

Simple, funciona en todos los navegadores, pero un poco hack-y.

Answer 3

De acuerdo, usted está luchando contra las limitaciones del navegador y de eventos aquí.

No se puede simular un evento UI de forma que imita la interacción humana (es un problema de seguridad). Sin embargo, hay ciertas formas incorporadas de manipular el control de texto en algunos elementos DOM. El elemento textarea es un buen ejemplo de esto con sus variables selectionStart/selectionEnd (implementación específica del navegador). Probablemente deberías notar que en Firefox, selectionStart/selectionEnd hace tu efecto deseado, pero, de nuevo, solo bajo Firefox.

Por lo tanto, su problema no se puede resolver de forma cruzada. Tendría que ir a simular el efecto a través del corte de texto y demás.

Aquí es una rápida pseudo-código ejemplo de lo que quiero decir:

element.onblur = function (event) { 
    this.hidden = this.value; 
    if (this.value.length > (this.offsetsetWidth/12)) { 
     this.shown = this.value.slice(this.value.length - (this.offsetWidth/12)); 
     this.value = this.shown; 
    } 
}; 

element.onfocus = function (event) { 
    this.value = this.hidden || this.value; 
}; 

La rebanada hackear aquí está basada en una relación entre la anchura de una fuente de espacio fijo (12 píxeles) a la anchura del elemento (lo que sea que pueda ser). Entonces, si tenemos una caja de 144px y estamos tratando con una fuente monoespaciada, sabemos que podemos caber 12 caracteres en la caja a la vez, así que cortamos de esta manera.

Si la longitud del valor en la entrada es de 24 caracteres, hacemos cálculos simples para cortar en (24 - (w/12)) 'la posición t en la cadena.

Todo es un truco - Y, honestamente, ¿hay alguna aplicación práctica para esto? Quizás debas agregar algún subtexto debajo de la entrada que da una vista previa tipo elipsis de la última parte del texto.

Answer 4

Siento que podría haber leído mal la pregunta después de leer las otras respuestas hablando de hacks y demás, pero reuní una muestra rápida que funciona bien en IE8 y Firefox 3.5.2. Suponiendo que un elemento de entrada con un id = "Test" y llamando a los siguientes onfocus función:

function TestFocus() 
{ 
    var Test = document.getElementById("Test"); 
    if (document.selection) 
    { 
      var SEnd = document.selection.createRange(); 
      SEnd.moveStart("character", Test.value.length); 
      SEnd.select(); 
    } 
    else if (Test.setSelectionRange) 
    { 
     Test.setSelectionRange(Test.value.length, Test.value.length); 

     //- Firefox work around, insert a character then delete it 
     var CEvent = document.createEvent("KeyboardEvent"); 
     if (CEvent.initKeyEvent) 
     { 
      CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32); 
      Test.dispatchEvent(CEvent); 
      CEvent = document.createEvent("KeyboardEvent"); 
      CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0); 
      Test.dispatchEvent(CEvent); 
     } 
    } 
    //- The following line works for Chrome, but I'm not sure how to set the caret position 
    Test.scrollLeft = Test.scrollWidth; 
} 

En Firefox, utiliza initKeyEvent para enviar una tecla de espacio y luego la tecla de retroceso inmediatamente después. En Chrome, no estoy seguro de cómo configurar el cursor para ir al final, pero configurar scrollLeft en la entrada casi funciona, ¿tal vez puedes jugar con él un poco? En cuanto a Opera, no tengo idea. Sin embargo, espero que esto te ayude en tu camino.

Answer 5

establece la propiedad text-align css del cuadro de texto alineado a la derecha al perder el foco.

con mootools:

$('#yourtextboxid').setStyle('text-align', 'right');