How to stop page refresh when hit enter button from rich:inputNumberSpinner field?_问答_开发者

How to stop page refresh when hit enter button from rich:inputNumberSpinner field?

开发者 https://www.devze.com 2023-01-02 14:57 出处：网络

I use rich:inputNumberSpinner tag. The problem is : I set cursor focus to inside of rich:inputNumberSpinner field, then i hit the enter button from my keyboard, that time page will be automatically

I use rich:inputNumberSpinner tag.

The problem is :

I set cursor focus to inside of rich:inputNumberSpinner field, then i hit the enter button from my keyboard, that time page will be automatically refresh.

But i don't need page refresh when i hit the enter button from my keyboard.

The code :

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开发者_JAVA百科 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>

I also use rich:hotKey for that inputNumberSpinner field. But Page refreshed.

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

And i check anotherway using javasccript, but page refreshed.

The specific tag and javascript is :

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

<script type="text/javascript">

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

Here i use one alert message inside of stopPageRefresh().

But i hit enter button, first page refreshing and then alert message displayed.

Help me about this. Thanks in advance.

I'm not a JSF expert, but I think the problem is only related to client-side JavaScript.

In several browsers you cannot prevent default actions using onkeypress (in some browsers you can, in some browsers this is the only way of preventing default actions). Anyway, this is a great mess with a lot of differences between browsers.

Following code will add the appropriate event handler to spinnerField. Run it inside an onload event handler, or at least after spinnerField is rendered.

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

Update: Possibly you have to set the cancelBubble property in IE to fully prevent submitting on Enter, but I'm not sure about that. If the above example doesn't work properly in Microsoft's product, replace noEnter with:

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

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

Just i modify your script like add one alert message.

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

it can be fixed by Richfaces library update (at least for the RF 3.x). You have to fix the sources in RF and rebuild it. it works for me

Download RichFaces sources
Extract them and navigate to the file in which form-submission is done “ui/inputnumber-spinner/src/main/resources/org/richfaces/renderkit/html/script/SpinnerScript.js”

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

}

rebuild the richfaces

see details here http://achorniy.wordpress.com/2010/11/06/disable-enter-form-submit-fix-inputnumberspinner/