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

2 Answers 2

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.