navigateur Cross « saut »/« scroll » textarea

Question

J'ai un textarea avec de nombreuses lignes d'entrée, et un événement se déclenche JavaScript qui NECESSITE je fais défiler la zone de texte à la ligne 345.

scrollTop ne sorte de ce que je veux , sauf pour autant que je peux dire c'est au niveau des pixels, et je veux quelque chose qui fonctionne sur un niveau de ligne. Ce qui complique aussi les choses, c'est que, une fois de plus, il n'est pas possible de faire des textareas pas de line-wrap.

Answer 1

Vous pouvez arrêter le wrapping avec l'attribut wrap. Il ne fait pas partie de HTML 4, mais la plupart des navigateurs le supportent.
Vous pouvez calculer la hauteur d'une ligne en divisant la hauteur de la zone par son nombre de lignes.

<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"/> 

Testé OK dans FF3 et IE6.

Answer 2

Si vous utilisez .scrollHeight au lieu de .clientHeight, il fonctionnera correctement pour textareas qui apparaissent avec une hauteur limitée et une barre de défilement:

<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

Quelque chose à considérer lorsqu'on se réfère à la réponse acceptée: vous pouvez pas avoir spécifié l'attribut rows dans votre textarea par exemple à la place, vous pouvez avoir défini la hauteur du textarea en utilisant CSS.

se référant donc à ta.rows ne fonctionnera pas comme ci-dessus (il est 2 par défaut), donc au lieu que vous pourriez obtenir le line-height de votre textarea via currentStyle/getComputedStyle ou même jQuery de .css(), et faire quelque chose comme ce qui suit:

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; 
}