asked on

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

Julian Hansen

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

manjunathub

use html tabindex property for the text fields

Obadiah Christopher

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

Julian Hansen

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

Obadiah Christopher

Please don't forget to remove this line

console.log(e);

Julian Hansen

@informaniac, thanks for picking that up.

ASKER CERTIFIED SOLUTION

RadhikaVyas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RadhikaVyas

ASKER

Google search helped me to solve my issue