在 Firefox 和 chrome 中 window.getSelection 用于获取文档中的当前选择,但是当前选择在 textarea 中,window.getSelection 没有返回选择,而是 textarea 本身。那么,如何在 Firefox 和 chrome 中正确选择呢?
问问题
4728 次
2 回答
5
您是否需要在文本区域中获取选定的文本?您可能会要求 selectionStart 和 selectionEnd(在 Internet Explorer 中不存在,适用于 Firefox 和 Chrome)
Select some text below and then click the button:<br/>
<textarea id="myTextarea" rows="5" cols="30">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</textarea>
<button onclick="alert(getTextSelection())">alert text selection</button>
<script type="text/javascript">
function getTextSelection(){
var field = document.getElementById("myTextarea");
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var field_value = field.value;
var selectedText = field_value.substring(startPos,endPos);
return selectedText;
}
</script>
如果有多个文本区域并且您希望在选择时获得输出:
Select some text in either textarea:<br/>
<textarea rows="5" cols="30" onselect="alert(getTextSelection(this))">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</textarea>
<textarea rows="5" cols="30" onselect="alert(getTextSelection(this))">
fate it seems
not without a sense of irony
</textarea>
<script type="text/javascript">
function getTextSelection(field){
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var selectedText = field.value.substring(startPos,endPos);
return selectedText;
}
</script>
或者您仍然可以使用按钮但使用全局变量来执行此操作:
Select some text in either textarea and click the button:<br/>
<textarea rows="5" cols="30" onselect="window.selectedTextarea=this">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</textarea>
<textarea rows="5" cols="30" onselect="window.selectedTextarea=this">
fate it seems
not without a sense of irony
</textarea>
<button onclick="alert(getTextSelection())">alert text selection</button>
<script type="text/javascript">
// warning: global variable: dirty!!!
var selectedTextarea
function getTextSelection(){
var field = window.selectedTextarea;
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var selectedText = field.value.substring(startPos,endPos);
return selectedText;
}
</script>
于 2012-05-15T08:34:42.627 回答
0
文本区域和文本输入具有不同的选择 API。它们具有文本区域/输入属性中的字符偏移量selectionStart
和属性。这些属性已在 HTML5 中标准化,并由所有主要浏览器的当前版本实现,尽管 IE < 9 再次具有不同的 API。selectionEnd
value
于 2012-05-15T08:32:04.353 回答