Tìm vị trí con trỏ trong một Textarea

Tôi đang cố triển khai Tự động điền trong vùng văn bản (tương tự như http://www.pengoworks.com/workshop/jquery/autocomplete.htm).Tìm vị trí con trỏ trong một Textarea

Điều tôi đang cố gắng thực hiện là khi người dùng nhập một tập hợp các ký tự cụ thể (giả sử chèn :) họ sẽ nhận được div được điền đầy AJAX với các kết quả có thể chọn.

Trong hộp văn bản thông thường, điều này đơn giản, nhưng trong vùng văn bản, tôi cần có khả năng bật div ở vị trí chính xác trên màn hình dựa trên con trỏ.

Có ai có thể cung cấp bất kỳ hướng nào không?

Cảm ơn, -M

Nguồn

2008-12-04 Anonymous

Bạn có thể lấy caret sử dụng document.selection.createRange(), và sau đó kiểm tra nó để lộ ra tất cả các thông tin cần thiết (chẳng hạn như vị trí). Xem those examples để biết thêm chi tiết.

Nguồn

2008-12-04 16:45:39

function getCursor(nBox){ 
    var cursorPos = 0; 
    if (document.selection){ 
     nBox.focus(); 
     var tmpRange = document.selection.createRange(); 
     tmpRange.moveStart('character',-nBox.value.length); 
     cursorPos = tmpRange.text.length; 
    } 
    else{ 
     if (nBox.selectionStart || nBox.selectionStart == '0'){ 
      cursorPos = nBox.selectionStart; 
     } 
    } 

    return cursorPos; 
} 

function detectLine(nBox,lines){ 
    var cursorPos = getCursor(nBox); 
    var z = 0; //Sum of characters in lines 
    var lineNumber = 1; 
    for (var i=1; i<=lines.length; i++){ 
     z = sumLines(i)+i; // +i because cursorPos is taking in account endcharacters of each line. 
     if (z >= cursorPos){ 
      lineNumber = i; 
      break; 
     } 
    } 

    return lineNumber; 

    function sumLines(arrayLevel){ 
     sumLine = 0; 
     for (var k=0; k<arrayLevel; k++){ 
      sumLine += lines[k].length; 
     } 
     return sumLine; 
    } 
} 



function detectWord(lineString, area, currentLine, linijeKoda){ 
    function sumWords(arrayLevel){ 
     var sumLine = 0; 
     for (var k=0; k<arrayLevel; k++){ 
      sumLine += words[k].length; 
     }  
     return sumLine; 
    } 


    var cursorPos = getCursor(area); 
    var sumOfPrevChars =0; 
    for (var i=1; i<currentLine; i++){ 
     sumOfPrevChars += linijeKoda[i].length; 
    } 

    var cursorLinePos = cursorPos - sumOfPrevChars; 

    var words = lineString.split(" "); 
    var word; 
    var y = 0; 


    for(var i=1; i<=words.length; i++){ 
     y = sumWords(i) + i; 
     if(y >= cursorLinePos){ 
      word = i; 
      break; 
     } 
    } 

    return word; 
} 

var area = document.getElementById("area"); 
var linijeKoda = area.value.split("\n"); 
var currentLine = detectLine(area,linijeKoda); 
var lineString = linijeKoda[currentLine-1]; 
var activeWord = detectWord(lineString, area, currentLine, linijeKoda); 
var words = lineString.split(" "); 
if(words.length > 1){ 
    var possibleString = words[activeWord-1]; 
} 
else{ 
    var possibleString = words[0]; 
}

Điều đó sẽ làm điều đó ... :)

Nguồn

2009-06-22 15:59:49 Popara

một giải pháp xấu xí:

cho ví dụ: sử dụng document.selection ...

cho ff: sử dụng một tiền đằng sau textarea , dán văn bản trước con trỏ vào nó, đặt phần tử html đánh dấu sau nó (cursorPos) và nhận vị trí con trỏ qua phần tử đánh dấu đó

Ghi chú: | mã là xấu xí, xin lỗi vì điều đó | phông chữ trước và textarea phải giống nhau | opacity được sử dụng để hiển thị | không có autocomplete, chỉ cần một con trỏ sau div đây (khi bạn gõ bên trong textarea) (sửa đổi nó dựa trên nhu cầu của bạn)

<html> 
<style> 
pre.studentCodeColor{ 
    position:absolute; 
    margin:0; 
    padding:0; 
    border:1px solid blue; 
    z-index:2; 
} 
textarea.studentCode{ 
    position:relative; 
    margin:0; 
    padding:0; 
    border:1px solid silver;  
    z-index:3; 
    overflow:visible; 
    opacity:0.5; 
    filter:alpha(opacity=50); 
} 
</style> 

hello world<br/> 
how are you<br/> 
<pre class="studentCodeColor" id="preBehindMyTextarea"> 
</pre> 
<textarea id="myTextarea" class="studentCode" cols="100" rows="30" onkeyup="document.selection?ieTaKeyUp():taKeyUp();"> 
</textarea> 

<div 
    style="width:100px;height:60px;position:absolute;border:1px solid red;background-color:yellow" 
    id="autoCompleteSelector"> 
autocomplete contents 
</div> 

<script> 
var myTextarea = document.getElementById('myTextarea'); 
var preBehindMyTextarea = document.getElementById('preBehindMyTextarea'); 
var autoCompleteSelector = document.getElementById('autoCompleteSelector'); 

function ieTaKeyUp(){ 
    var r = document.selection.createRange(); 
    autoCompleteSelector.style.top = r.offsetTop; 
    autoCompleteSelector.style.left = r.offsetLeft; 
} 
function taKeyUp(){ 
    taSelectionStart = myTextarea.selectionStart; 
    preBehindMyTextarea.innerHTML = myTextarea.value.substr(0,taSelectionStart)+'<span id="cursorPos">'; 
    cp = document.getElementById('cursorPos'); 
    leftTop = findPos(cp); 

    autoCompleteSelector.style.top = leftTop[1]; 
    autoCompleteSelector.style.left = leftTop[0]; 
} 
function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return [curleft,curtop]; 
} 
//myTextarea.selectionStart 
</script> 
</html>

Nguồn

2009-08-06 11:26:01

Thực hiện một autocomplete trong một vùng văn bản mà không phải là dễ dàng. Tôi đã thực hiện một plugin jquery để thực hiện điều đó, và tôi phải tạo một bản sao của texarea để đoán vị trí của con trỏ bên trong vùng văn bản. Công việc của nó, nhưng nó không hoàn hảo.

Bạn có thể kiểm tra xem nó ra ở đây: http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/

Tôi hy vọng nó giúp.

Nguồn

2011-03-09 10:44:18 Amir

Tìm vị trí con trỏ trong một Textarea

Trả lời

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