如何從用戶選擇一個div

我有選擇的一個元素DISABLED獲取文本：如何從用戶選擇一個div

<div id="text" onmousedown="selectionStart();" onmouseup="selectionEnd();"> 
    Stuff Here 
</div>

我想要做的就是創建在用戶試圖用值來選擇文本div的，用戶在它內部選擇（所以它看起來像被突出顯示）。當選擇完成後，用戶可以拖動這個div而沒有問題。

我對selectionStart（）的代碼基本上是設置鼠標所在的X位置（以及繪製DIV元素的Y位置）。

我的selectionEnd（）代碼獲取了最終的X和Y位置，並執行了innerHTML的子字符串。

這個想法是獲得單個字符寬度並繼續 - 是一種可行的方法嗎？

更新：
我現在可以得到確切的字符選擇，現在我需要做的是在選定區域上創建一個div（具有不透明度/透明度）。

function selectionStart() 
    { 
     if (characterWidth == 0) 
     { 
      widthCalc = document.getElementById("text"); 
      var storedValue = widthCalc.innerText; 
      widthCalc.innerText = 'X'; 
      var range = document.body.createTextRange(); 
      range.moveToElementText(widthCalc); 
      range.select(); 
      var caretPos = document.selection.createRange(); 
      caretPos.select(); 
      caretPos.findText("X"); 
      characterWidth = caretPos.boundingWidth; 
      widthCalc.innerText = storedValue;  
     } 
     startPositionX = Math.round((mouseX(event)+5)/characterWidth); 
     startPositionY = mouseY(event); 
    } 

    function selectionEnd() 
    { 
     endPositionX = Math.round((mouseX(event)+5)/characterWidth); 
     endPositionY = mouseY(event); 
     var myRulerText = document.getElementById("text"); 
     newSquare = document.createElement('div'); 
     newSquare.setAttribute('id', 'newSquare') 
     newSquare.innerText = myRulerText.innerText; 

     if ((startPositionX - endPositionX) > 0) 
     { 
      transferBox = startPositionX; 
      startPositionX = endPositionX; 
      endPositionX = transferBox; 
     } 

     newSquare.innerText = newSquare.innerText.substring(startPositionX-2,endPositionX-1); 
     newSquare.style.left = 50; 
     newSquare.style.top = 100; 
     alert(newSquare.innerText); 
    }

來源

2010-07-28 Rijvi Rajib

嗨 - 如果你不想一千jQuery的狂熱者在這個問題上，你應該刪除jQuery的標籤下降。如果你正在尋找一個jQuery解決方案（或者不介意），那麼在你的問題中這樣說。 :-) – calumbrodie 2010-07-28 15:35:57

好點，現在刪除jQuery。 – 2010-07-28 15:59:22

這是一個偉大的Tut選擇文本

http://davidwalsh.name/text-selection-ajax

來源

2010-07-28 16:01:26

嗨，感謝您的教程，但它使用了基本的文本選擇，我無法使用，因爲Internet Explorer堅持通過自動選擇整個單詞來幫助用戶。 – 2010-07-28 16:17:29

如何從用戶選擇一個div

回答

相關問題