Oracle ADF中实现输入框字数统计功能

需求：在我们的信息系统中，为了用户体验，通常会有如下图的字数统计功能：



在传统的jsp页面里实现这样的功能，相信各位同学都会轻车熟路，但是当我们使用了oracle adf框架后，实现这个功能，尽然花费了我一天的时间，原因是，企图使用oracle adf自己封装的js api实现，结果是徒劳。原因如下：

先来看一下源代码：

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:trh="http://myfaces.apache.org/trinidad/html">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1" title="不能正常工作的字数自动统计输入框实验">
      <trh:script id="showAutoNum">
        var leftLen = 300;
        function counterNum2(actionEvent) {
            var component = actionEvent.getSource();
            var markContent = component.findComponent("markContent");
            var content = markContent.getValue();
            var usedLen = content.length;
            var maxLen = markContent.getMaximumLength();
            leftLen = maxLen - usedLen;
            var showNum = AdfPage.PAGE.findComponent("showNum");
            showNum.setValue("可写 " + leftLen + " 字");
        }
      </trh:script>
      <af:panelSplitter id="ps1">
        <f:facet name="first">
          <af:panelGroupLayout layout="scroll"
                               xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                               id="pgl1">
            <af:inputText label="备注" id="markContent" rows="10"
                          clientComponent="true" maximumLength="300">
              <af:clientListener type="keyUp" method="counterNum2"/>
            </af:inputText>
          </af:panelGroupLayout>
        </f:facet>
        <f:facet name="second">
          <af:outputText id="showNum" value="可写 300 字" clientComponent="true"/>
        </f:facet>
      </af:panelSplitter>
    </af:document>
  </f:view>
</jsp:root>

分析：

1、在这个页面中，我使用了oracle adf js api查找一个页面对象，设置其值，但af:clientListener这个标签的监听事件类型设为type="keyUp"，根本不是想象的那样（当键盘键弹起时触发），只有当焦点移开af:inputText备注框时，才能触发。

2、oracle adf js api都是发送一些异步的ajax请求，上面的这个例子在备注输入框失去焦点的时候也能统计出结果，但是，似乎是由于ajax 异步请求后台处理的原因，统计很不流畅，甚至有很大的延迟，用户体验非常差。

基于上述两个原因，我继续寻求其他的解决办法，我在想，这样统计字数的功能，在使用jsp或html的时候，我们通常都是用前台的js技术解决，根本不需要与后台服务器交互，那么，在这里，我们能不能也这样处理呢？想到这里，我的思路豁然开朗，我借助firebug的强大功能，分析了上面代码在浏览器中解析后的结构，见如下图：



这样以来，我将上面的代码改为如下代码，最终达到了我们想要的效果：

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:trh="http://myfaces.apache.org/trinidad/html">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1" title="desc:auto count textarea input demo by using oracle adf framework. author:[e-mail]">
      <af:panelSplitter id="ps1" orientation="vertical" collapsed="false"
                        disabled="true" splitterPosition="200">
        <f:facet name="first">
          <af:inputText label="备注" id="markContent" rows="10"
                        clientComponent="true" maximumLength="300"></af:inputText>
        </f:facet>
        <f:facet name="second">
          <af:outputText id="showNum" value="可写 300 字" clientComponent="true"/>
        </f:facet>
      </af:panelSplitter>
      <trh:script id="autoCountInput">
        //获取输入框对象，markContent为af:inputText的id
        var markContentObj = document.getElementById('markContent::content');
            
        //获取显示字数对象，showNum为af:outputText的id
        var showNumObj = document.getElementById('showNum');
        
        //设置输入框背景
        markContentObj.style.backgroundColor = "White";
        
        //设置输入框监听函数
        markContentObj.onkeyup = function () {                   
            
            //获取输入框中的字符串
            var markContent = markContentObj.value;
            
            //获取输入框中的字符串的长度
            var usedLen = markContent.length;
            
            //无法直接获取输入框允许输入的最大数，请保持与af:inputText的maximumLength一致
            var maxLen = 300;
            
            //计算还剩余多少字可输入
            var leftLen = maxLen - usedLen;
            
            var showNum = showNumObj.innerText;
            
            //设置界面显示剩余的字数
            var showMsg = "可写 " + leftLen + " 字";
            if (typeof(showNum) == "undefined") {
                showNumObj.textContent = showMsg;
            } else {
                showNumObj.innerText = showMsg;
            }
        };
      </trh:script>
    </af:document>
  </f:view>
</jsp:root>

代码里都做了详细的注释，我这里就不在赘述。值得一提的是，在最后ie和firefox兼容性上遇到了点麻烦，对于html的span标记的操作，firefox不支持innerText属性，最后改为textContent，但对于对undefined的比较变量，要使用typeof进行转换，是我之前不知道的知识点，经过查找资料解决了兼容性问题。

总结：

从上面的例子可以看到，对于oracle adf的js api如果在使用时不是那么得心应手，我们通过上面的方法，同样可以回归到最基础的html、js方式进行处理，这样就突破的oracle adf框架的限制，实现许多我们自己想要的功能。

值得一提的是，如果我们确定要使用原生的js api来操作html dom树实现自己的功能，兼容性是个问题，这就要求我们借助httpwatch（ie下使用）和firebug（firefox下使用）这些工具进行相应的调试，这一定程度上对我们的开发带来了难度，因此，这就要求我们对基础知识有足够的掌握，才能利用好任何的开发框架，在提高效率的同时，又能利用基础知识解决框架不能解决的难题。