Tìm vị trí dấu mũ trong textarea theo pixel

Tôi đã tự hỏi liệu có thể tìm thấy vị trí chính xác của carret bên trong một vùng văn bản tính bằng pixel liên quan đến toàn bộ trang hay không. Ví dụ: nếu tôi đã nhập This is text vào hộp văn bản của mình, tôi muốn biết các điểm ảnh từ trên cùng bên trái của màn hình tới dấu chấm.Tìm vị trí dấu mũ trong textarea theo pixel

Nó sẽ ở dạng X: 200 Y: 100. Điều này là để tôi có thể định vị một div nổi. Điều này cần phải được thực hiện động trong javascript.

Thanks guys

Nguồn

2012-01-26 JustinPGriffen

Approx '42' pixies. – alex

Cảm ơn bạn đã làm rõ: P – alex

Bạn có thể quan tâm [bất kỳ số câu hỏi nào trong số này] (http://stackoverflow.com/search?q=caret+javascript+position+x+y). –

này "mã thô" hoạt động ít nhất trong IE.

Sử dụng mã bạn có thể đặt <TEXTAREA> nơi bạn muốn trong trang và <DIV id="db"> sẽ theo dõi nó. Mặc dù vị trí cuộn của trang. Bạn có thể sửa vị trí của <DIV> bằng cách thay đổi các số theo thứ tự tại số d.style...6 -báo cáo.

<body> 
<div id="db" style="position:absolute;left:-20px;top:-20px;border:1px solid red;">V</div> 
<br><br><br> 
<form id="props"> 
<textarea id="ta" style="width:200px;height:100px;" onkeyup="moveDiv();"></textarea> 
</form> 

<script> 
<!-- 
var b=document.body; 
var d=document.getElementById('db'); 
var a=document.getElementById('ta'); 

function moveDiv(){ 
    var sel=document.selection; 
    var targ=sel.createRange(); 
    d.style.top=a.offsetTop+a.clientTop-d.clientHeight-6; 
    d.style.left=targ.offsetLeft+b.scrollLeft-6; 
    return; 
} 
// --> 
</script> 
</body>

vị của <DIV> không phải là khá chính xác, nhưng sẽ tốt hơn khi sử dụng phông chữ cố định chiều rộng trong <TEXTAREA>.

Nguồn

2012-01-26 07:44:05 Teemu

Dưới đây là một plug-in cho việc này: jQuery caret plugin

Nguồn

2012-01-26 02:34:26

Plugin đó hoạt động với vị trí của dấu mũ liên quan đến các ký tự trong trường nhập; OP đang tìm kiếm màn hình (ví dụ x, y) vị trí của dấu mũ. –

Bạn không phải là một tay hơi nặng với phiếu bầu xuống? Vui lòng giải thích! –

Vâng, downvote là vì một vài lý do, nhưng xin vui lòng không mang nó cá nhân - Tôi nhanh chóng hủy bỏ các downvote nếu câu trả lời được tích cực cập nhật. Lý do cho downvote là A) đó là câu trả lời chỉ có liên kết, [không được khuyến khích] (http://meta.stackexchange.com/questions/8231) và B) trong khi plugin có thể hỗ trợ cho nỗ lực của OP, đó là mục đích là để cả hai thiết lập và tìm thấy dấu mũ giữa các ký tự cụ thể trong một đầu vào, mà không phải là những gì OP là sau trong trường hợp này. –

Có một implemention: https://github.com/beviz/jquery-caret-position-getter, nó có thể được vị trí dấu nháy trong textarea (IEX, y)

Nguồn

2012-02-20 14:46:33

Tôi đã thay đổi liên kết thành Github. –

Bất kỳ cơ hội nào không phụ thuộc vào jQuery? Chúng tôi đã gặp [vấn đề khi sử dụng plugin của bạn với jQuery 1.9. *, Loại bỏ '$ .browser'] (https://github.com/beviz/jquery-caret-position-getter/issues/5). –

Đây là một kết hợp đơn giản của ý tưởng từ Caret position in pixels in an input type text (not a textarea), Caret position in textarea, in characters from the start và document.getElementById vs jQuery $() để có được vị trí dấu nháy trong jQuery cho một yếu tố <input>. Nó hoạt động khi nhấp vào bên trong nó, nhưng không phải khi di chuyển dấu mũ bằng cách sử dụng mũi tên hoặc gõ.

<input id="someid"> 
<span id="faux" style="display:none"></span><br/> 

<script> 
var inputter = $('#someid')[0]; 
var faux = $('#faux'); 

function getCaret(el) { 
    if (el.selectionStart) { 
     return el.selectionStart; 
    } else if (document.selection) { 
     el.focus(); 

     var r = document.selection.createRange(); 
     if (r == null) { 
      return 0; 
     } 

     var re = el.createTextRange(), 
      rc = re.duplicate(); 
     re.moveToBookmark(r.getBookmark()); 
     rc.setEndPoint('EndToStart', re); 

     return rc.text.length; 
    } 
    return 0; 
} 

$("#someid").click(function(event) { 
    caretpos = getCaret(inputter); 
    calcfaux = faux.text($(this).val().substring(0, caretpos)); 
    fauxpos = calcfaux.outerWidth(); 
    $("#getpx").text(fauxpos + " px"); 
}); 

</script>

Thay vì var inputter = document.getElementById('someid') chúng tôi sử dụng var inputter = $('#someid')[0];

Đây là một FIDDLE.

Nguồn

2013-02-14 13:33:41

Tìm vị trí dấu mũ trong textarea theo pixel

Trả lời

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