4

I have the following dynamic input html in my project

  $(this).html("<input type='text' style='width:35px;' value='" + $(this).text() + "' />");

Now i was trying to add validation for using only numeric in above input text field.

But being new to jquery i was wondering how do i add keypress event to it

Want to use following validation to it

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

I tried follwoing but does not seem to work

$(this).html("<input type='text'  onkeypress='return isNumber(event)' style='width:35px;' value='" + $(this).text() + "' />");

EDIT

Any other way to add validation for using only number

Richa
  • 3,261
  • 2
  • 27
  • 51
  • @ViktorBahtev Seriously?? I don't see any connection between this 2 questions – Richa Aug 13 '14 at 11:04
  • 1
    You want to add event on dynamic generated elements right? In the suggested thread is described exactly how to do it. Attach the event on some existing DOM element and delegate it to the elements that you want - $(document).on('keypress', 'myactualselector', eventHandler); – Viktor Bahtev Aug 13 '14 at 11:07
  • @Richa You might want to provide the code where you're appending the `HTML` to distinguish it from the delegation questions… Hope the answer helps. – T J Aug 13 '14 at 11:53
  • @Richa hey Richa... try custom designs like flatty.. u need not have to write new codes for this kind of validations.. they provide almost every basic stuffs.. wen i got one..u wer d one dat came to ma mind at first.. – Nidhin S G Sep 17 '14 at 04:31

3 Answers3

4

Use event delegation

$(document).on("keypress","input[type=text]",isNumber);

// $(document) use closest parent for this

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Balachandran
  • 9,567
  • 1
  • 16
  • 26
1

My guess is that, you're executing the shared code in an event of parent element such as click.

So when you click the textbox, the click (or similar event) is bubbled to it's parent, hence triggering the handler which replaces the textbox with a new one.

You can prevent it by calling the stopPropagation() method of event object onclick of the textbox as follows:

$("#container").click(function () {
  $(this).html("<input type='text' onkeypress='return isNumber(event)' onclick='event.stopPropagation();' style='width:35px;' value='" + $(this).text() + "' />");});

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

Demo

T J
  • 42,762
  • 13
  • 83
  • 138
0

Use type="number"

$(this).html("<input type='number' style='width:35px;' value='" + $(this).text() + "' />");

You can also set restrictions on what numbers are accepted:

See Here W3School Input Type: number

Nitish Kumar
  • 4,850
  • 3
  • 20
  • 38