Chữ thập duyệt "nhảy vào"/"di chuyển" textarea

Question

Tôi có một textarea với nhiều dòng đầu vào, và JavaScript cháy sự kiện đó đòi hỏi tôi di chuyển các textarea để dòng 345.

scrollTop loại làm những gì tôi muốn , ngoại trừ chừng nào tôi có thể nói đó là cấp pixel, và tôi muốn thứ gì đó hoạt động ở cấp độ dòng. Điều gì cũng làm phức tạp mọi thứ là, một lần nữa, nó không thể làm cho textareas không line-wrap.

Answer 1

Bạn có thể dừng gói bằng thuộc tính bọc. Nó không phải là một phần của HTML 4, nhưng hầu hết các trình duyệt đều hỗ trợ nó.
Bạn có thể tính chiều cao của một đường bằng cách chia chiều cao của khu vực cho số hàng.

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

Đã kiểm tra OK trong FF3 và IE6.

Answer 2

Nếu bạn sử dụng .scrollHeight thay vì .clientHeight, nó sẽ hoạt động đúng cho textareas được hiển thị với chiều cao hạn chế và một thanh cuộn:

<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

cái gì đó để xem xét khi đề cập đến câu trả lời được chấp nhận: bạn có thể chưa chỉ định thuộc tính rows trong ví dụ textarea của bạn thay vào đó, bạn có thể đã đặt chiều cao của textarea bằng cách sử dụng CSS.

Do đó đề cập đến ta.rows sẽ không làm việc theo trên (đã ghi bàn 2 theo mặc định), vì vậy thay vào đó bạn có thể nhận được các line-height của textarea của bạn thông qua currentStyle/getComputedStyle hoặc thậm chí jQuery .css(), và làm điều gì đó như sau:

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