lấy hàng và cột con trỏ trong div có thể chỉnh sửa nội dung

Có một số công thức để tìm vị trí con trỏ khi người dùng nhập văn bản vào div có thể chỉnh sửa nội dung, nhưng tôi không thể nhận bất kỳ công việc nào trong số đó. Trong thực tế, tôi nhận được kết quả đáng ngạc nhiên nhất từ mã đơn giản nhất; nếu, trong đoạn mã sau đây, bạn thêm một số văn bản và sau đó backspace để loại bỏ nó, startoffset của bạn thực sự tăng! (Tôi có thể tưởng tượng các yếu tố tách của nó hoặc thứ gì đó và phần bù đắp bao gồm các thẻ không thể in được hoặc một thứ gì đó.)lấy hàng và cột con trỏ trong div có thể chỉnh sửa nội dung

Tôi có một phông chữ cố định nhưng tôi định thêm cú pháp vào (không phải chỉ làm; kịp thời tương tác nhiều hơn với chỉnh sửa bất cứ nơi nào trong kịch bản nếu đó loại có ý nghĩa tại sao tôi muốn có được vị trí bản thân mình)

<html> 
<head> 
<script type="text/javascript"> 
<!-- 
var ta = null; 

function onKeypress(event) { 
    var range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeypress = onKeypress; 
} 
//--> 
</script> 
<body onload="init();"> 
<noscript> 
Sorry, you need javascript. Not much to see here otherwise; move along. 
</noscript> 
<p id="msg"></p><hr/> 
<div id="ta" contenteditable="true" style="width:100%; height:100%; font-family: courier;"> 
</div> 
</body> 
</html>

làm thế nào tôi có thể biết hàng và cột, và nhận được văn bản. cho bất kỳ hàng nào, trong div có thể chỉnh sửa nội dung như vậy?

Nguồn

2012-03-31 Will

Tôi không chắc chắn những gì bạn đang nói là sai với mã của bạn. Khi tôi kiểm tra mã ví dụ của bạn trong Chrome, mã có vẻ hoạt động - khi tôi backspace màn hình vị trí không cập nhật cho đến khi tôi bắt đầu nhập văn bản vào div, nhưng sau đó hiển thị vị trí lại chính xác. Vấn đề là backspace không kích hoạt sự kiện keyup, hay cái gì khác tôi đang thiếu? – Griffin

Ah, tôi nghĩ tôi hiểu, tôi đã đăng câu trả lời. – Griffin

-1

Bạn có cân nhắc sử dụng hộp văn bản thay vì div không?

<textbox>edit my content</textbox>

Nếu bạn phải sử dụng một div bạn có thể nhận và cập nhật nội dung của nó với thuộc tính innerHTML

alert(document.getElementById('theIdOfMyDiv').innerHTML);

hoặc để thêm nội dung

var currentContent = document.getElementById('theIdOfMyDiv').innerHTML; 
currentContent = currentContent + 'add some content';

Nguồn

2012-04-01 10:42:53 codelove

Bạn thậm chí đã đọc câu hỏi chưa? – Griffin

+1 để hiểu câu hỏi – codelove

Sau khi thay đổi onkeypress một onkeydown (sao cho không gian backspace được chụp) Tôi thấy rằng số lần hiển thị vị trí tăng một lần khi một không gian backspace được nhập vào.

Hãy tha thứ cho tôi nếu tôi đã có kết thúc sai trái của cây gậy, nhưng tôi tin rằng một giải pháp là cách làm như sau:

var ta = null; 
var range = null; 

function onKeyDown(event) { 
    if(event.which != 8 && event.which != 46) { 
     range = window.getSelection().getRangeAt(0); 
     document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
    } 
} 

function onKeyUp(event) { 
    range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeydown = onKeyDown; 
    ta.onkeyup = onKeyUp; 
}

Nguồn

2012-04-01 15:29:26 Griffin

điều gì xảy ra nếu bạn nhấn phím enter? – Will

Nó bắt đầu đếm lại từ số không. không có gì trong mã của bạn để hiển thị hàng nào con trỏ đang bật. – Griffin

nhưng đó là câu hỏi lớn hơn! "Làm thế nào tôi có thể biết hàng và cột, và nhận được văn bản cho bất kỳ hàng nào, trong một div có thể chỉnh sửa nội dung?". Vì đây giống như một trình soạn thảo văn bản phong phú, mỗi khi người dùng nhấn một phím tôi muốn biết họ đang ở dòng nào và nội dung của dòng là gì. – Will

lấy hàng và cột con trỏ trong div có thể chỉnh sửa nội dung

Trả lời

Các vấn đề liên quan