从 inputTextArea primefaces jsf 捕获选定的文本

Question

我想在 ajax dblclick 或 select 事件上从 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

您可以按如下方式向远程命令发送参数：

观点

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

请注意，text selection 会因浏览器而异。

豆子

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

Answer 2

你可以使用这个插件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 上的直播 demo。