从rich：inputNumberSpinner字段点击输入按钮时如何停止页面刷新？答案

【问题标题】：How to stop page refresh when hit enter button from rich:inputNumberSpinner field?从rich：inputNumberSpinner字段点击输入按钮时如何停止页面刷新？
【发布时间】：2011-03-01 11:03:38
【问题描述】：

我使用 rich:inputNumberSpinner 标签。

问题是：

我将光标焦点设置在 rich:inputNumberSpinner 字段的内部，然后我从键盘上按回车键，那个时间页面将自动刷新。

但是当我从键盘上按下回车键时，我不需要刷新页面。

代码：

spinnerTagTest.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<f:view>
    <html>
      <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">              
     </head>
<body>
      <h:form id="SpinnerForm">                                  
              <rich:inputNumberSpinner id="spinnerField" value="" />              
      </h:form>
</body> </html></f:view>

我还为 inputNumberSpinner 字段使用了rich:hotKey。但是页面刷新了。

<rich:hotKey key="return"
             selector="#spinnerField"
             handler="event.stopPropagation();event.preventDefault();
             return false;"/>

我使用 javascript 进行了另一种检查，但页面已刷新。

具体的标签和javascript是：

<rich:inputNumberSpinner id="spinnerField"  value="" 
                         oninputkeypress="return stopPageRefresh();"/>

<script type="text/javascript">

    function stopPageRefresh()
    {
        return false;
    }
</script>

在这里，我在 stopPageRefresh() 中使用了一条警报消息。
但是我按了 Enter 按钮，首页刷新，然后显示警报消息。

帮我解决这个问题。提前致谢。

【问题讨论】：

标签： javascript forms jsf refresh

【解决方案1】：

我不是 JSF 专家，但我认为问题仅与客户端 JavaScript 有关。

在多个浏览器中，您cannot prevent default actions 使用onkeypress（在某些浏览器中可以，在某些浏览器中这是防止默认操作的唯一方法）。无论如何，这很混乱，浏览器之间存在很多差异。

以下代码会将适当的事件处理程序添加到spinnerField。在onload 事件处理程序中运行它，或者至少在spinnerField 被渲染之后运行。

if (window.opera)
  document.getElementById("spinnerField").onkeypress = noEnter;
else
  document.getElementById("spinnerField").onkeydown = noEnter;

function noEnter(e) {
  var event = e || window.event;

  if (event.keyCode == 13)
    return false;
}

更新：您可能必须在 IE 中设置 cancelBubble 属性以完全阻止在 Enter 上提交，但我不确定。如果上面的例子在微软的产品中不能正常使用，请将noEnter替换为：

function noEnter(e) {
  var event = e || window.event;

  if (event.keyCode == 13) {
    event.cancelBubble = true;
    return false;
  }
}

【讨论】：

感谢您的努力。但是我在您的脚本中测试了一条警报消息。刷新页面后也会调用该警报。
@eswa：警报信息？你把那条线放在哪里？
打开大括号后，我添加了警告信息。 function noEnter(e) { alert("开始进程..."); //这里我使用你的代码 }
@eswa：在这种情况下，每次按键都会弹出警报。例如，如果你将它放在 if 块内，它只会在你按下 Enter 时触发。

【解决方案2】：

我只是修改了您的脚本，例如添加一条警报消息。

<script type="text/javascript">

document.onkeydown=noEnter;
if (window.opera)
      document.getElementById("spinnerField").onkeypress = noEnter;
else
     document.getElementById("spinnerField").onkeydown = noEnter;

function noEnter(e)
{
      alert("start...");
      var event = e || window.event;
      if (event.keyCode == 13)
      {
         event.preventDefault();
         return false;
      }
}

【讨论】：

这里在打开弹出窗口（警报）之前，页面已刷新。
我觉得这是JSF组件相关的问题。如果你知道jsf相关的论坛，那么请你提一下。帮助我。
您不应该在每种情况下都附加onkeydown 事件……此外，这样每次按键都会弹出警报。如果你把它放在 if 块中，它只会在你按 Enter 时触发。
你有示例页面，我们可以看看实际生成的HTML吗？
好的。那案子我也查了。就像，我在 if 块内部插入警报消息。当我从那个丰富的：inputNumberSpinner 字段中按 Enter 按钮时，然后刷新第一页，然后提醒 winwow 打开。

【解决方案3】：

它可以通过 Richfaces 库更新来修复（至少对于 RF 3.x）。您必须修复 RF 中的源并重建它。它对我有用

下载 RichFaces 源代码
提取它们并导航到完成表单提交的文件 “ui/inputnumber-spinner/src/main/resources/org/richfaces/renderkit/html/script/SpinnerScript.js”

评论 this.edit.form.submit();

    if (e.keyCode == 13){
    if (this.spinner.required || "" != this.edit.value)
        this.edit.value = this.getValidValue(this.edit.value);
    if (this.edit.form) {
        this.edit.form.submit(); //!!comment it
    }
}

}

重建富脸

在此处查看详细信息http://achorniy.wordpress.com/2010/11/06/disable-enter-form-submit-fix-inputnumberspinner/

【讨论】：