javascript:组件ID问题

问题描述：1.在一个JSF页面里面有2个from。

               2.其中一个form 是用来实现登录功能。form里面有2个输入框，用以输入用户名和密码，还有一个提交按钮。

               3.我们的要求是在输入密码后，按回车就提交登录请求。

 

分析：如果页面里面只有一个提交按钮，我们是不需要做特殊的处理就能实现这个需求的。但现在我们有2个form。我准备用javascript 来实现它。最初的javascript 代码如下：

         function processKeyDown() {
                     var key = event.keyCode;
                     if (key == 13 ) {
                     document.getElementById("loginButton").onclick();    
               }
         }

         然后我在密码输入框的 onkeyup 事件里调用这个方法。运行结果报错：document.getElementById(...)为空或不是对象。我仔细的检查了页面，提交按钮的ID是loginButton。而是写的方法里面，不存在组件加载先后的问题。

        后来在同事的提醒下，来查看运行页面的的源文件，发现提交按钮的ID变成了：loginForm:loginButton。也就是在加上了form 的ID。这个就是问题所在。所以我们应该把上面的方法写成：

          function processKeyDown() {
                     var key = event.keyCode;
                     if (key == 13 ) {
                     document.getElementById("loginButton").onclick();    
                }
          }

遗留问题：JSF页面在编译成xhtml文件的时候，组件的ID 是怎么转换的？