Question

在firefox和chrome window.getSelection用于获取文档中的当前选择，但是当前选择是在textarea中，window.getSelection没有返回选择，而是返回textarea本身。那么，如何在firefox和chrome中正确选择？

Answer 1

您是否需要在textarea中获取所选文本？您可能会要求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>

如果有多个textareas并且您希望选择输出：

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>

Answer 2

Textareas和文本输入具有不同的选择API。它们具有selectionStart和selectionEnd属性，这些属性是textarea / input的value属性中的字符偏移量。这些属性已经在HTML5中标准化，并且由所有主要浏览器的当前版本实现，尽管IE＆lt; 9再次有不同的API。

window.getSelection在textarea中获得正确的选择

2 个答案: