capture selected text from inputTextArea primefaces jsf

Question

I want to capture selected text from inputTextArea on ajax dblclick or select event.How can I do this ? The code below selects everything in the text area (which I don't want). Thank you very much.

<h:form id="form">          
        <p:panel header="Select Text">  
            <h:panelGrid columns="3" cellpadding="5">  
                <h:outputText value="Text: " />  
                <p:inputTextarea id="textarea" 
                            value="#{selectedTextBean.selectedText}">  
                    <p:ajax event="select" update="selectedText" />  
                </p:inputTextarea>  
                <h:outputText id="selectedText" 
                          value="#{selectedTextBean.selectedText}" />
            </h:panelGrid>  
        </p:panel>               
</h:form>  

Here is SelectedTextBean

@ManagedBean
@ViewScoped
public class SelectedTextBean {

   public SelectedTextBean() {
   }
   private String selectedText;  

   public String getSelectedText() {
    return selectedText;
   }
   public void setSelectedText(String selectedText) {
    this.selectedText = selectedText;
   }
}

Answer 1

You can use this plugin jquery-textrange.

xhtml

<p:inputTextarea onselect="setSelectedText()" />                     
<p:remoteCommand name="setSelectedTextCommand" 
                 actionListener="#{mainBean.setSelectedText()}"
                 update="currentSelectedText" />
Selected Text is: 
            <h:outputText value="#{mainBean.selectedTextInArea}" 
                          id="currentSelectedText" />

<h:outputScript library="js" name="jquery-textrange.js" />
<script>
   function setSelectedText() {
      var range = $('.ui-inputtextarea').textrange();// general selector
      setSelectedTextCommand([{name: 'selectedText', value: range.text}]); 
   }
</script>

Bean

private String selectedTextInArea;

public void setSelectedText() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map map = context.getExternalContext().getRequestParameterMap();
    selectedTextInArea = (String) map.get("selectedText");
}

public String getSelectedTextInArea() {
    return selectedTextInArea;
}

public void setSelectedTextInArea(String selectedTextInArea) {
    this.selectedTextInArea = selectedTextInArea;
}

And Here's a live demo on Primefaces TextArea Selection, and on github.

Answer 2

You can do that sending a parameter to a remote command as follows:

The View

<h:form id="form">          
    <p:panel header="Select Text">  
        <h:panelGrid columns="3" cellpadding="5">  
            <h:outputText value="Text: " />  
            <h:panelGroup>
                <p:inputTextarea id="textarea" 
                                 value="#{selectedTextBean.selectedText}" onselect="processSelection();" />
                <p:remoteCommand name="sendSelection" actionListener="#{selectedTextBean.onSelect}" update="selectedText" process="@this" />
            </h:panelGroup>
            <h:outputText id="selectedText" 
                          value="#{selectedTextBean.selectedText}" />
        </h:panelGrid>  
    </p:panel>               
</h:form>
<script>
    function processSelection() {
        var selectedText = (!!document.getSelection) ? document.getSelection() :
                (!!window.getSelection) ? window.getSelection() :
                document.selection.createRange().text;
        sendSelection([{name: 'selectedText', value: selectedText}]);
    }
</script>

Note that the text selection changes depending on the browser.

The Bean

import java.io.Serializable;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class SelectedTextBean implements Serializable {

    public SelectedTextBean() {
    }
    private String selectedText;

    public void onSelect() {
        FacesContext context = FacesContext.getCurrentInstance();
        Map map = context.getExternalContext().getRequestParameterMap();
        selectedText = (String) map.get("selectedText");
    }

    public String getSelectedText() {
        return selectedText;
    }

    public void setSelectedText(String selectedText) {
        this.selectedText = selectedText;
    }
}