navegador Cruz "salto a"/"scroll" área de texto

Question

Tengo un área de texto con muchas líneas de entrada y un javascript desencadena el evento que requiere enrollo el área de texto a la línea 345.

scrollTop especie de hace lo que quiero , excepto por lo que puedo decir que es el nivel de píxel, y quiero algo que opere en un nivel de línea. Lo que también complica las cosas es que, afaik una vez más, no es posible hacer que las áreas de texto no estén alineadas.

Answer 1

Puede dejar de envolver con el atributo de ajuste. No es parte de HTML 4, pero la mayoría de los navegadores lo admiten.
Puede calcular la altura de una línea dividiendo la altura del área por su número de filas.

<script type="text/javascript" language="JavaScript"> 
function Jump(line) 
{ 
    var ta = document.getElementById("TextArea"); 
    var lineHeight = ta.clientHeight/ta.rows; 
    var jump = (line - 1) * lineHeight; 
    ta.scrollTop = jump; 
} 
</script> 

<textarea name="TextArea" id="TextArea" 
    rows="40" cols="80" title="Paste text here" 
    wrap="off"></textarea> 
<input type="button" onclick="Jump(98)" title="Go!" value="Jump"/> 

Probado OK en FF3 e IE6.

Answer 2

Si utiliza .scrollHeight en lugar de .clientHeight, funcionará correctamente para áreas de texto que se muestran con una altura limitada y una barra de desplazamiento:

<script type="text/javascript" language="JavaScript"> 
function Jump(line) 
{ 
    var ta = document.getElementById("TextArea"); 
    var lineHeight = ta.scrollHeight/ta.rows; 
    var jump = (line - 1) * lineHeight; 
    ta.scrollTop = jump; 
} 
</script> 

<textarea name="TextArea" id="TextArea" 
    rows="40" cols="80" title="Paste text here" 
    wrap="off"></textarea> 
<input type="button" onclick="Jump(98)" title="Go!" value="Jump"/> 

Answer 3

Algo a tener en cuenta cuando se hace referencia a la respuesta aceptada: es posible no se ha especificado el atributo rows en su textarea, por ej. en su lugar, puede haber configurado la altura del textarea usando CSS.

tanto en referencia a ta.rows no funcionará a lo anterior (que es 2 por defecto), así que en vez usted podría conseguir el line-height de su textarea través currentStyle/getComputedStyle o incluso jQuery de .css(), y hacer algo como lo siguiente:

function jump(line) { 
    var ta = document.getElementById("TextArea"); 
    var jump = line * parseInt(getStyle(ta, 'line-height')); 
    ta.scrollTop = jump; 
} 

function getStyle(el, styleProp) { 
    if (el.currentStyle) { 
    var y = el.currentStyle[styleProp]; 
    } else if (window.getComputedStyle) { 
    var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); 
    } 
    return y; 
}