如何从用JavaScript TextBox控件选定的文本(How to get selected

2019-09-17 00:01发布

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

我该怎么做?


当我点击提交按钮,文本框下方,消息框必须显示Lorem存有。 因为“Lorem存有”的区域中选择。


如果我选择从页面的任何文字并点击提交按钮,它是工作,但如果我写了文字文本框,并使其,事实并非如此。 因为当我点击另一个空间,文本框的选择被取消。

现在的问题是,当我选择从文本文字,然后点击任何其他控制或空间,其选择是必须仍选定的文本。

它是如何做呢?

Answer 1:

OK,这里是我的代码:

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按钮,但...



Answer 2:

这里有一个更简单的解决方案,基于该上的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 ,具有相同的代码。

如果没有这个于2001年申请回Firefox的错误 (是的,14年前),我们可以替换分配的值window.mySelectionwindow.getSelection().toString() ,这在IE9 +以及所有现代浏览器的工作原理,并且还获得在DOM的非文本区域的部分所做的选择。



Answer 3:

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



Answer 4:

对于Opera,Firefox和Safari浏览器,你可以使用以下功能:

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

然后,你只是传递到文本字段元件(如一个textarea或输入元件),以该函数的引用:

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

或者,如果你想<textarea>的和的<input>有自己的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());

例如。



Answer 5:

的大风扇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>


文章来源: How to get selected text from textbox control with javascript