如何获得选案文文本框控制与javascript
-
07-07-2019 - |
题
我有一个文本框和一个链接按钮。当我写一些文字,然后选择他们中的一些,然后点击的链接按钮,选案文文本必须显示有一个消息框.
我怎么可以这样做?
当我点提交按钮用于文本框下面的消息框中必须显示存.因为"存"是选择在该地区。
如果我选择的任何文本的页面点击按钮就是工作,但如果我写了一个文本为文本,并使它,不是这样的。因为当我击到另一个空间,选择的文本被取消。
现在的问题是,当我选择的文本,文本框和击其他任何控制或空间,案文被选定,是必须仍然选择。
它是如何做?
解决方案
好吧,在这里是代码我有:
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);
}
问题,虽然代码我给即给予关的网站很多,我无法让它的工作对我复制的IE6我目前的系统。也许这会对你的工作,这就是为什么我得到它。
第一招,你看起来是可能的。重点()呼吁,得到回textarea的焦点,使选择是重新激活。
[更新]我得到了正确的结果(选择的内容)与onKeyDown事件:
document.onkeydown = function (e) { ShowSelection(); }
这样的代码是正确的。再次,这个问题是,获得的选择上的按一个按钮...我继续搜索。
[更新]我没有成功得出一个按钮 li
标记,因为当我们击,即取消以前的选择。上述代码工作一个简单的 input
按钮,虽然...
其他提示
这是一个更简单的解决方案,基于在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错误归档在2001年(是的,14年前),我们可以用window.mySelection
替换分配给window.getSelection().toString()
的值,这可以在IE9 +和所有现代浏览器中使用,并且还可以在非文本区域中进行选择。 DOM。
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" />
对于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; input <!> 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());
例如。
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>