爲什麼這個簡單的javascript/jquery代碼不能提醒選中的文本？

我無法解釋下面的代碼的行爲。這裏是我的整個腳本爲什麼這個簡單的javascript/jquery代碼不能提醒選中的文本？

<html> 
<head> 
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
var tmpText = ''; 
$(document).ready(function(){ 
     tmpText = ''; 
     $('#btn_bold').click(function(){alert(tmpText);}); 
     $('textarea').bind('mouseup', function(){ 
        tmpText = ''; 
        if(window.getSelection){ 
        tmpText = window.getSelection(); 
        }else if(document.getSelection){ 
        tmpText = document.getSelection(); 
        }else if(document.selection){ 
        tmpText = document.selection.createRange().text; 
        } 
       //tmpText = 'hello world'; 
       alert(tmpText); 
     }); 
}); 

</script> 
</head> 
<body> 
<button type="button" id="btn_bold">click</button> 
<textarea>This is some text</textarea> 
</body> 
</html>

請嘗試以下操作：

1）使用鼠標高光文字文本區域。你會注意到，JavaScript會提醒你選擇的文本。

2）按下單擊按鈕。你會注意到javascript會提醒你一個空字符串。

否取消註釋tmpText = 'hello world';並重覆上述步驟。這一次，您會注意到步驟1）和2）會提醒您「hello world」。

在第一個實驗中，第2步怎麼會沒有提示您與第1步相同的文本？

我在谷歌瀏覽器

來源

2011-05-29 John

測試，因爲它不會自動地轉化爲字符串。當你用alert（）直接調用它的時候，它會在它上面運行toString，但是當你將一個變量賦值給以後使用時，它會保持它作爲選擇對象，當你稍後嘗試提醒它時，你可能不會有選擇活動了（因爲你只是點擊了按鈕）。

添加toString（）在每個選擇的結尾，它應該按預期工作。

if(window.getSelection){ 
        tmpText = window.getSelection().toString(); 
        }else if(document.getSelection){ 
        tmpText = document.getSelection().toString(); 
        }else if(document.selection){ 
        tmpText = document.selection.createRange().text; 
        }

example on jsfiddle

我想起這被解釋相當不錯的getSelection位下的Mozilla開發者頁面，如果你想有一個更好的解釋爲什麼它是這樣的。

編輯：找到mozilla頁面的鏈接，具體檢查一下他們在「註釋」下面說的話。

來源

2011-05-29 21:51:10 Niklas

隨後：在添加.toString（）之前，我複製了代碼並添加了一個帶有setInterval事件的，該事件每500ms調用一次'$（「＃in」）.val（tmpText），只要在TEXTAREA中有選擇，就會顯示正確的tmpText，但一旦模糊就會被清除。 tmpText var引用*選擇對象*，當TEXTAREA失去其選擇時，該對象被更新爲零長度值。 – 2011-05-29 22:02:33

確切地說，這也將解釋單擊按鈕時的空值，因爲選擇將在該點被刪除。 – Niklas 2011-05-29 22:07:54

雖然這是真的，但它不是基本問題，這是textarea選擇在大多數瀏覽器中的工作方式不同（使用textarea的'selectionStart'和'selectionEnd'屬性）。 – 2011-05-30 10:03:43

在大多數瀏覽器中，textarea（或文本輸入）內的選擇與頁面主體中的選擇不同。爲了得到一個textarea內選定的文本，你可以使用下面的，這在所有主流瀏覽器的工作原理：

的jsfiddle：http://jsfiddle.net/fxN7p/

代碼：

function getTextareaSelectedText(textarea) { 
    var text = ""; 
    if (typeof textarea.selectionStart == "number") { 
     text = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd); 
    } else if (typeof document.selection != "none" && document.selection.type == "Text") { 
     text = document.selection.createRange().text; 
    } 
    return text; 
}

來源

2011-05-29 22:27:11

斐伊川...

你必須轉換爲字符串的選擇...例如

window.getSelection().toString()

否則你不會訪問數據

來源

2011-05-29 23:32:52 Pablo

爲什麼這個簡單的javascript/jquery代碼不能提醒選中的文本？

回答

相關問題