为什么这个简单的 javascript/jquery 代码不能提醒选定的文本？答案

【问题标题】：Why can't this simple javascript/jquery code alert selected text?为什么这个简单的 javascript/jquery 代码不能提醒选定的文本？
【发布时间】：2011-09-04 11:06:11
【问题描述】：

我无法解释下面代码的行为。这是我的整个脚本

<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) 相同的文本？

我正在谷歌浏览器中测试

【问题讨论】：

标签： javascript jquery

【解决方案1】：

因为它不会自动转换为字符串。当您使用 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 上找到该页面的链接，具体检查他们在“注释”下所说的内容。

【讨论】：

随后：在添加 .toString() 之前，我复制了代码并添加了一个带有 setInterval 事件的，该事件每 500 毫秒调用一次 $("#in").val(tmpText)，只要有TEXTAREA中的选择，但一模糊就被清除了。 tmpText var 引用了 selection 对象，当 TEXTAREA 失去其选择时，该对象被更新为长度为零。
没错，这也解释了单击按钮时的空值，因为此时选择将被删除。
虽然这是真的，但这不是根本问题，因为大多数浏览器中 textarea 选择的工作方式不同（使用 textarea 的 selectionStart 和 selectionEnd 属性）。

【解决方案2】：

在大多数浏览器中，文本区域（或文本输入）中的选择与页面主体中的选择不同。要在 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;
}

【讨论】：

【解决方案3】：

喂……

您必须将选择转换为字符串...示例

window.getSelection().toString()

否则您将无法访问数据

【讨论】：