如何使用javascript从textbox控件获取选定文本
我有一个文本框和一个链接按钮。 当我写一些文本,然后选择其中的一些,然后单击链接按钮,从文本框中选择的文本必须与messagebox一起显示 我怎么做 当我单击下面文本框的提交按钮时,消息框必须显示Lorem ipsum。因为Lorem ipsum是在该区域中选择的 如果我从页面中选择任何文本并单击“提交”按钮,它就会工作,但如果我将文本写入文本框并使其生效,它就不会工作。因为当我点击另一个空间时,文本框的选择被取消 现在的问题是,当我从文本框中选择一个文本并单击任何其他控件或空格时,选中的文本必须仍然处于选中状态如何使用javascript从textbox控件获取选定文本,javascript,html,textarea,textselection,selectedtext,Javascript,Html,Textarea,Textselection,Selectedtext,我有一个文本框和一个链接按钮。 当我写一些文本,然后选择其中的一些,然后单击链接按钮,从文本框中选择的文本必须与messagebox一起显示 我怎么做 当我单击下面文本框的提交按钮时,消息框必须显示Lorem ipsum。因为Lorem ipsum是在该区域中选择的 如果我从页面中选择任何文本并单击“提交”按钮,它就会工作,但如果我将文本写入文本框并使其生效,它就不会工作。因为当我点击另一个空间时,文本框的选择被取消 现在的问题是,当我从文本框中选择一个文本并单击任何其他控件或空格时,选中的文本
如何操作?对于Opera、Firefox和Safari,您可以使用以下功能:
function getTextFieldSelection(textField) {
return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}
alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));
然后,只需将对文本字段元素(如textarea或input元素)的引用传递给函数:
function getTextFieldSelection(textField) {
return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}
alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));
或者,如果您希望和拥有自己的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());
例如。好的,下面是我的代码:
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标记的按钮,因为当我们单击它时,即取消选择以前的选择。上面的代码使用一个简单的输入按钮,但是…
函数显示{
var text=document.getElementByIdtext;
var t=text.value.substrtext.selectionStart,text.selectionEnd-text.selectionStart;
alertt;
}
你好,你好吗?
超级粉丝
下面是一个非常小、独立的示例。下载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>
这里有一个更简单的解决方案,基于mouseup上发生文本选择的事实,因此我们添加了一个事件侦听器: document.querySelector'textarea'。addEventListener'mouseup',函数{ window.mySelection=this.value.substringthis.selectionStart,this.selectionEnd //window.getSelection.toString; }; 选择一些文本
8岁的波斯特,我知道。但无论如何。。。也许您可以尝试:在您的按钮上单击call$.focus,然后调用ShowSelection,从活动元素中获取零件?这是可以做到的。不需要任何jQuery插件。看。所以你批评了七年前给出的解决方案,但没有表明你不会在IE<9*好的,用现代的解决方案更新主题很好,但不要忘记有些人喜欢较旧的浏览器。*@PhiLho:令人难以置信的是,它在FF中不起作用——14年前就有了这个bug。更新的答案。此解决方案运行良好,但当光标离开文本区域“框”时,事件将不会触发。必须添加以下代码才能在这种情况下工作:document.querySelector'textarea'。addEventListener'mouseleave',函数{window.mySelection=this.value.substringthis.selectionStart,this.selectionEnd;};当您离开textarea时,该事件也会触发,因此保留您的选择。这是可行的,但如果disp中有更复杂的代码,则在代码从textarea获得选择时,例如构建,浏览器可能已将其清除,因为按钮上发生的单击事件意味着textarea接收到一个事件,该事件将清除所选内容。当选择发生时,通过将其保存在变量中来解决该问题。我认为您应该在IE某些参考中查看firefox和textrange输入字段的selectionstart/selectionend属性: