Cross-Browser „Sprung zu“/„blättern“ TextArea-

Question

Ich habe ein Textfeld mit vielen Eingabezeilen und ein JavaScript-Ereignis ausgelöst, die ich bewegen die TextArea- erfordert 345.

scrollTop Art Linie tut, was ich will , außer, soweit ich sagen kann, dass es Pixel-Level ist, und ich möchte etwas, das auf Line-Ebene funktioniert. Was die Dinge auch noch komplizierter macht, ist, dass es afaik nicht mehr möglich ist, textareas nicht in Zeilenumbrüche umzuwandeln.

Answer 1

Sie können den Wickel mit dem Attribut wrap stoppen. Es ist nicht Teil von HTML 4, aber die meisten Browser unterstützen es.
Sie können die Höhe einer Linie berechnen, indem Sie die Höhe des Bereichs durch die Anzahl der Zeilen dividieren.

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

Getestet OK in FF3 und IE6.

Answer 2

Wenn Sie .scrollHeight statt .clientHeight verwenden, wird es richtig für Textbereiche arbeiten, die mit einer begrenzten Höhe und eine Scrollbar dargestellt sind:

<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

Etwas zu prüfen, wenn auf die akzeptierte Antwort verweisen: können Sie nicht das rows Attribut in Ihrem textarea zB angegeben haben stattdessen haben Sie möglicherweise die Höhe des textarea mithilfe von CSS festgelegt.

bezieht daher ta.rows wird nach oben nicht (es ist standardmäßig 2), so stattdessen könnten Sie die line-height Ihrer textarea über currentStyle/getComputedStyle oder sogar jQuery .css(), und etwas tun, wie folgt erhalten:

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