• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 588
  • Last Modified:

Next textbox focus by keypad dot press

HI I have two textboxes one for dollars and another for cents.....i want javascript validation..dollar textbox shoud accept only numbers and dot operator...if i press "." from my keyboard it should jump to next box(cents) which also accepts only numbers..However I tried considering charcode of "." operator i.e."190"...but its working from keyboard but not number pad..My CLIENT wants it from number pad '.' press.....please help
0
RadhikaVyas
Asked:
RadhikaVyas
  • 3
  • 2
  • 2
  • +1
1 Solution
 
Julian HansenCommented:
Keycode is linked to a specific key you need to check for the actual character you want to look for charcode 46
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.dollars').keypress(function(c) {
    if(c.charCode == 46) {
      $(this).next().focus();
      return false;
    }
    if (c.charCode < 48 || c.charCode > 57) {
      return false;
    }
  });
  $('.cents').keypress(function() {
    if ($(this).val().length == 2) return false;
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
Input here <input type="text" class="dollars" /> <input type="text" class="cents" /
</body>
</html>

Open in new window

0
 
manjunathubCommented:
use html tabindex property for the text fields
0
 
informaniacCommented:
Should be the keyup event I guess. Otherwise the code might not work in case of backspace.

$('.cents').keypress(function() {
    if ($(this).val().length == 2) return false;
  });
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
Alternative code to allow for backspace, del, Alt etc
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.dollars').keypress(function(c) {
    if(c.charCode == 46) {
      $(this).next().focus();
      return false;
    }
  });
  $('.number').keydown(function(e) {
  if (e.charCode == 46 && $(this).hasClass('dollars')) {
      $(this).next().focus();
      return false;
  }
  console.log(e);
  return isNumeric(e)
  });
});
function isNumeric(event)
{
  if ( event.altKey || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
     // Allow: Ctrl+A
    (event.keyCode == 65 && event.ctrlKey === true) || 
     // Allow: home, end, left, right
    (event.keyCode >= 35 && event.keyCode <= 39)) {
       // let it happen, don't do anything
       return true;
  }
  else {
    // Ensure that it is a number and stop the keypress
    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
      return false
    }   
  }
  return true;
}
</script>
<style type="text/css">
</style>
</head>
<body>
Input here <input type="text" class="number dollars" /> <input type="text" class="number cents" /
</body>
</html>

Open in new window

0
 
informaniacCommented:
Please don't forget to remove this line

console.log(e);
0
 
Julian HansenCommented:
@informaniac, thanks for picking that up.
0
 
RadhikaVyasAuthor Commented:
I solved it myself..I used  key code 110 which solved my problem...
0
 
RadhikaVyasAuthor Commented:
Google search helped me to solve my issue
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now