JavaScript to prevent keystroke

asked on November 7, 2018

Hi All

I have been at this for quite some time now and finally decided to ask the question.

Been using http://api.jquery.com/each/ and https://www.laserfiche.com/support/webhelp/Laserfiche/10/en-us/administration/Default.htm#../Subsystems/Forms/Content/Javascript-and-CSS/Customizing%20Tables.htm#IteratingoverTableRows

to try and figure out how to prevent an end user from pressing a specific key on a text field within a table.

I got it right on a single field using:

$(document).ready(function()
    {
        // Stop user to press enter in textbox
        $("input:text").keypress(function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
});

But now I cannot seem to win the iteration war. I still get it to work on the first row using:

$(document).ready(function() {
  
  cantpressenter();
  
  $('.onceofftable tbody tr').on('keypress', cantpressenter);
  
  function cantpressenter(){
    
    $('.onceofftable tbody tr').each(function () {
      
      $(this).find('.OnceOffDescription').each(function () {
        
        if (event.keyCode == 13) {
          
        event.preventDefault();
          
        }
      
      });
    
    });
    
 
  
}
                  
                  });

What am I doing wrong :O!?

Please help! Thanks in advance.

0 0

SELECTED ANSWER

replied on November 7, 2018

I believe I just got it to work..

Since I am using my own custom css, it seems that I only use that css to select the table.

Code that works for me:

$(document).ready(function() {
  
  cantpressenter();
  
  $('.onceofftable').on('keypress', cantpressenter);
  
  function cantpressenter(){
    
    $('.onceofftable').each(function () {
      
      $(this).find('.OnceOffDescription').each(function () {
        
        if (event.keyCode == 13) {
          
        event.preventDefault();
          
        }
      
      });
    
    });
    }
});

0 0

replied on November 7, 2018 • Show version history

Hello,

Just to help fill in some gaps, the reason your first attempt wasn't working is probably because it was assigning event handlers in the document ready event. If your table allows rows to be added/removed, then anything other than the first row doesn't exist when it runs and therefore doesn't get the event handler assigned.

The solution would be to either run against the whole table as you did in the end, or to rerun the process any time a row is added so that the event handler can be attached to the new row. If you set your table to start with 2 rows instead of 1, then the original approach would have worked on those first 2 because that method works for anything that exists at the time the form is loaded.

Alternatively, if you started with 1 row, then added some new rows and deleted the first row, you would find that the original approach wouldn't be working on any of the rows; the problem comes down to what exists in the DOM when your functions are executed.

0 0

replied on November 8, 2018

After spending several hours on it yesterday I managed to figure out what you have said in a much less verbally approachable manner.

I saw eventually that the https://www.laserfiche.com/support/webhelp/Laserfiche/10/en-us/administration/Default.htm#../Subsystems/Forms/Content/Javascript-and-CSS/Customizing%20Tables.htm#IteratingoverTableRows example was not implying that their rows are static, I figured that out after properly reading the post.

I am still new to using Laserfiche Forms version of JavaScripting so I am far from comfortable in just jumping in to a project, but I am getting to a point where taking on the challenge is less scary.

Thanks for this reply, reading it now after figuring it out seems so obvious.

Appreciate the valuable feedback!

0 0

Question

Question

Answer

Replies

Sign in to reply to this post.