如何使用javascript从文本框控件中获取所选文本

时间:2008-11-09 09:10:24

标签: javascript html textarea textselection selectedtext

我有一个文本框和一个链接按钮。 当我写一些文本,然后选择其中一些文本,然后单击链接按钮,文本框中的选定文本必须与消息框一起显示。

我该怎么做?


当我点击下面文本框的提交按钮时,消息框必须显示Lorem ipsum。因为在该地区选择了“Lorem ipsum”。


如果我从页面中选择任何文本并单击提交按钮它正在工作,但如果我将文本写入文本框并进行创建,则不然。因为当我点击另一个空格时,文本框的选择被取消。

现在的问题是,当我从文本框中选择文本并单击任何其他控件或空格时,必须仍然选择所选文本。

怎么做?

6 个答案:

答案 0 :(得分:38)

好的,这是我的代码:

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  {// Standards Compliant Version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  {// IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

问题,虽然我给IE的代码是在很多站点上给出的,但我无法在我当前系统上的IE6副本上运行。也许这对你有用,这就是我给它的原因 您寻找的技巧可能是.focus()调用,以回复textarea焦点,以便重新激活选择。

[更新]我通过onKeyDown事件获得了正确的结果(选择内容):

document.onkeydown = function (e) { ShowSelection(); }

所以代码是正确的。同样,问题是单击按钮进行选择......我继续搜索。

[更新]我使用li标签绘制的按钮没有成功,因为当我们点击它时,IE取消选择之前的选择。上面的代码使用简单的input按钮,但是......

答案 1 :(得分:16)

这是一个更简单的解决方案,基于在mouseup上进行文本选择的事实,因此我们为此添加了一个事件监听器:

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

这适用于所有浏览器。

如果您还想通过键盘处理选择,请使用相同的代码为keyup添加另一个事件监听器。

如果不是这个Firefox bug filed back in 2001(是的,14年前),我们可以将window.mySelection分配给window.getSelection().toString()的值替换为if(Model.Pms != null){ for... } ,它适用于IE9 +和所有现代浏览器,还可以在DOM的非文本区域中进行选择。

答案 2 :(得分:4)

&#13;
&#13;
function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(t);
}
&#13;
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />
&#13;
&#13;
&#13;

答案 3 :(得分:2)

对于Opera,Firefox和Safari,您可以使用以下功能:

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

然后,您只需将对文本字段元素(如textarea或input元素)的引用传递给函数:

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

或者,如果你想要&lt; textarea&gt;和&lt;输入&gt;拥有自己的getSelection()函数:

HTMLTextAreaElement.prototype.getSelection = HTMLInputElement.prototype.getSelection = function() {
    var ss = this.selectionStart;
    var se = this.selectionEnd;
    if (typeof ss === "number" && typeof se === "number") {
        return this.value.substring(this.selectionStart, this.selectionEnd);
    }
    return "";
};

然后,你就是这样做:

alert(document.getElementsByTagName("textarea")[0].getSelection());
alert(document.getElementsByTagName("input")[0].getSelection());

例如。

答案 4 :(得分:1)

jQuery-textrange

的大粉丝

下面是一个非常小的,独立的例子。下载jquery-textrange.js并复制到同一文件夹。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>

<script>
/* run on document load **/
$(document).ready(function() {
    /* run on any change of 'textarea' **/
    $('#textareaId').bind('updateInfo keyup mousedown mousemove mouseup', function() {
        /* The magic is on this line **/
        var range = $(this).textrange();
        /* Stuff into selectedId.  I wanted to store this is a input field so it can be submitted in a form. **/
        $('#selectedId').val(range.text);
    });
});
</script>
</head>
<body>

    The smallest example possible using 
    <a href="https://github.com/dwieeb/jquery-textrange">
       jquery-textrange
    </a><br/>
    <textarea id="textareaId" >Some random content.</textarea><br/>
    <input type="text"  id="selectedId"  ></input>

</body>
</html>

答案 5 :(得分:0)

//Jquery
var textarea = $('#post-content'); 
var selectionStart = textarea.prop('selectionStart');
var selectionEnd = textarea.prop('selectionEnd');
var selection = (textarea.val()).substring(selectionStart,selectionEnd);

//Javascript
var textarea = document.getElementById("post-content");   
var selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);