1. ev
  2. Soru-cevap
  3. Bir Textarea

Bir Textarea

2008-12-04 25 views
8

içinde imleç konumunu alma Bir metin alanına Otomatik Tamamlama uygulamasına çalışıyorum (http://www.pengoworks.com/workshop/jquery/autocomplete.htm benzeri).Bir Textarea

Bir kullanıcı belirli bir karakter kümesine girdiğinde (eklemek için :), seçilebilecek olası eşleşmelerle AJAX doldurulmuş bir div alacaktır.

Düzenli bir metin kutusunda, bu elbette ki basittir, ancak bir metin alanında, imleci temel alarak ekranın doğru konumunda div açabilmem gerekir.

Herhangi biri herhangi bir yön sağlayabilir mi?

sayesinde -M

kaynak

2008-12-04 Anonymous

cevap

4

Bunu, konum,() ihtiyacınız olan tüm bilgileri ortaya çıkarmak için inceleme ardından document.selection.createRange (kullanarak şapka) alabilir ve. Daha fazla ayrıntı için bkz. thoseexamples.

kaynak

2008-12-04 16:45:39

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

:) ... bunu

kaynak

2009-06-22 15:59:49 Popara

0

çirkin çözüm olurdu Yani: yani için

: kullanım document.selection ... ff için

: textarea arkasında bir ön kullanmak , imleci önce metni yapıştırın, sonra bir işaretçi html öğesi (cursorPos) koyun ve imleç konumunu

üzerinden alın. Notlar: | kod çirkin, bunun için üzgünüm | pre ve textarea yazı tipi aynı olmalıdır | görselleştirme için opaklık kullanılır | Burada sadece bir imleç aşağıdaki div otomatik tamamlama, bir metin alanında bir otomatik tamamlama uygulanması

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

kaynak

2009-08-06 11:26:01

 İlgili konular

  • İlgili sorun yok^_^