• Registered: 2007-07-31
  • Posts: 199

Topic: Replace enter with tab

I'm develping a little app to scan barcodes.
I have about 8 fields per record all populated from barcodes

What I need is to capture the enter the barcode scanner adds at the end and replace with a ta so instead of submitting the form in after scanning the first field it would actually skip to the next one.

Here is what I have tried... but they all keep submitting after scanning the first field

First Ill provide my form

_form.html.erb

<p>
  <b>Part Number</b>
  <%= form.text_field :red_part_number, :onkeypress => "return SendTab(document.forms['f'], 'part_number', event);" %>
</p>
... other fields
<p>
  <b>Serial Number</b>
  <%= form.text_field :serial_number %>
</p>

new.html.erb

<h1>New Items</h1>

<% form_for(@items) do |f| %>
  <%= f.error_messages %>
  <%= render :partial => f %>
  <p>
    <%= f.submit "Create" %>
  </p>
<% end %>
<%= link_to 'Back', items_path %>

Codes I tried on the main layout. I have 3 scripts here and I tried all option on the form
none of them stopped the 'enter'

<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Serial Number</title>
  <%= stylesheet_link_tag 'scaffold' %>

<SCRIPT LANGUAGE="JavaScript">
function disableEnterKey(){
  if(event.keyCode == 13)
  {
    event.keyCode=9; //return the tab key
    event.cancelBubble = true;
  }
}
</script>

<SCRIPT LANGUAGE="JavaScript">
function catchEnter(e){
 var characterCode
  if(e && e.which)
   {
     e = e
     characterCode = e.which
   } 
  else 
   {
     e = event
     characterCode = e.keyCode
   }
  if(characterCode == 13)
   {
     document.getElementById(‘cardid’).focus();
    return false
   } 
  else
   {
     return true
   }
 }
</script>

<SCRIPT LANGUAGE="JavaScript">
function getIndex(input)  
   {  
     var index = -1, i = 0, found = false;  
     while (i < input.form.length && index == -1)  
       if (input.form[i] == input)index = i;  
       else i++;  
     return index;  
   }  
 // [/i]  
 function SendTab(objForm, , strField, evtKeyPress)  
 {  
   var aKey = evtKeyPress.keyCode ?  
     evtKeyPress.keyCode :evtKeyPress.which ?  
       evtKeyPress.which : evtKeyPress.charCode;  
   
   if (aKey == 13)  
   {  
     objForm[(getIndex(objForm[strField])+1) % objForm.length].focus();  
   }  
 }
</script>
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>

</body>
</html>
  • Registered: 2007-07-31
  • Posts: 199

Re: Replace enter with tab

Nothing???

  • Registered: 2007-07-31
  • Posts: 199

Re: Replace enter with tab

This code below does the job.... the problem is that it brakes prototype since it uses jquery

just in case some one else needs and don't care about prototype here is the code

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("input").not( $(":button") ).keypress(function (evt) {
      if (evt.keyCode == 13) {
        iname = $(this).val();
        if (iname !== 'Submit'){  
          var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
          var index = fields.index( this );
          if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
          }
          return false;
        }
      }
    });
    });

</script>

I still need a prototype friendly version

Thanks