跨浏览器的“跳转到” /“滚动”的textarea

Question

我有输入的多行文本区域，以及必要JavaScript事件触发我滚动textarea的排队345

scrollTop那种我想要做什么，除非我可以告诉它的像素级别，并且我想要一些在线级别上运行的东西。使事情复杂化的是，再一次，不可能让textareas不行换行。

Answer 1

您可以停止使用wrap属性进行换行。它不是HTML 4的一部分，但大多数浏览器都支持它。
您可以通过将区域的高度除以其行数来计算一条线的高度。

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

在FF3和IE6中测试OK。

Answer 2

如果使用.scrollHeight而不是.clientHeight，它将正常工作为显示有一个有限的高度和滚动文字区域：

<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

东西指的是接受的答案时要考虑：你可能没有在您的textarea中指定rows属性相反，您可能已经使用CSS设置了textarea的高度。

因此参照ta.rows将不按上述方式工作（这是默认2），因此，你可以通过currentStyle/getComputedStyle让你textarea的line-height甚至jQuery的.css()，并做类似如下：

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