Window.getselection Get The Right Selection In Textarea

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 s

Solution 1:

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/><textareaid="myTextarea"rows="5"cols="30">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
</textarea><buttononclick="alert(getTextSelection())">alert text selection</button><scripttype="text/javascript">functiongetTextSelection(){
        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/><textarearows="5"cols="30"onselect="alert(getTextSelection(this))"> 
Lorem ipsum dolor sit amet,  
consectetur adipiscing elit. 
</textarea><textarearows="5"cols="30"onselect="alert(getTextSelection(this))"> 
fate it seems
not without a sense of irony 
</textarea><scripttype="text/javascript">functiongetTextSelection(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/><textarearows="5"cols="30"onselect="window.selectedTextarea=this"> 
Lorem ipsum dolor sit amet,  
consectetur adipiscing elit. 
</textarea><textarearows="5"cols="30"onselect="window.selectedTextarea=this"> 
fate it seems
not without a sense of irony 
</textarea><buttononclick="alert(getTextSelection())">alert text selection</button><scripttype="text/javascript">// warning: global variable: dirty!!!var selectedTextarea

    functiongetTextSelection(){        
        var field = window.selectedTextarea;
        var startPos = field.selectionStart; 
        var endPos = field.selectionEnd;          
        var selectedText = field.value.substring(startPos,endPos); 
        return selectedText;
    }    
</script>

Solution 2:

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.