从inputTextArea primefaces jsf中捕获选定的文本

Question

我想从ajax dblclick或select dblclick inputTextArea捕获所选文本。我该怎么办？ 下面的代码选择文本区域中的所有内容（我不需要）。 非常感谢你。

<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>  

这是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

您可以使用此插件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>

豆角，扁豆

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;
}

这是Primefaces TextArea Selection和github上的现场演示 。

Answer 2

您可以按照以下步骤向远程命令发送参数：

风景

<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>

请注意， 文本选择根据浏览器而变化。

豆

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;
    }
}