javascript - window.getSelection get the right selection in textarea - Stack Overflow

admin管理员组

文章数量:1391937

in firefox and chrome window.getSelection is used to get the current selection in document,but is the current selection is in a textarea,the window.getSelection didn't return the selection,but the textarea itself. So,how to the right selection in firefox and chrome?

in firefox and chrome window.getSelection is used to get the current selection in document,but is the current selection is in a textarea,the window.getSelection didn't return the selection,but the textarea itself. So,how to the right selection in firefox and chrome?

• javascript
• firefox
• google-chrome

Share Improve this question Follow asked May 15, 2012 at 8:10 Guan YuxinGuan Yuxin 43066 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Do you need to get the selected text in a textarea? You may be asking for selectionStart and selectionEnd (does not exist in Internet Explorer, works with Firefox and 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>

If there are multiple textareas and you wish to get the output on select:

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>

Or you can still do it with a button but by using a global variable:

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> 

Textareas and text inputs have a differenct selection API. They have selectionStart and selectionEnd properties that are character offsets within the value property of the textarea / input. These properties have been standardized in HTML5 and are implemented by the current versions of all major browsers, although IE < 9 has a different API again.

本文标签： javascriptwindowgetSelection get the right selection in textareaStack Overflow