Creating input with onkeypress with jQuery?

Question

I am trying to create a input element with a expected html output of this:

<input 
  type="text" 
  maxlength="13" 
  value="DD/MM/YY 00:00.0" 
  onkeypress="dateTime()"
>

I tried doing this with the following jQuery code

var input = $("<input>",
  {
    name : newName,
    maxlength : newSize,
    size : newSize,
    type : 'text',
    value : newVal,
    onkeypress : dateTime()
  });

But I don't get the expected output

<input type="text" maxlength="13" value="DD/MM/YY 00:00.0">

Question 1 : what is the description of this code, because I cannot for the life of me find anything in the jQuery documentation about this stuff (link would be appreciated).

Question 2 : what is the correct parameter to use to get my expected html result?

What good is a link to jQuery if I don't know what the code is called? — tomaytotomato
– tomaytotomato, Commented Dec 15, 2013 at 17:29
@ComFreek the expected result is at the top please read carefully :) — tomaytotomato
– tomaytotomato, Commented Dec 15, 2013 at 17:30

Armel Larcier · Accepted Answer · 2013-12-15 17:54:30Z

1

try

onkeypress : "dateTime()"

instead of

onkeypress : dateTime()

that one executes the function.

var input = $("<input>",
  {
    name : newName,
    maxlength : newSize,
    size : newSize,
    type : 'text',
    value : newVal,
    onkeypress : dateTime
  });

or

input.on('keypress',dateTime);

In the callback, "this" represents the event target (input).

You can get values from the input by using $(this).val(); $(this).attr('myattribute'); $(this).data('myvar');

edited Dec 15, 2013 at 17:54

answered Dec 15, 2013 at 17:30

Armel Larcier

16k7 gold badges70 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tomaytotomato Over a year ago

Thanks, what is called in jQuery so I can search documentation to know what the accepted parameters are

Armel Larcier Over a year ago

The jQuery method is called ;-) api.jquery.com/jQuery/#jQuery-html-attributes Any parameter is acceptable. They will be placed as html attributes. Edited answer for jQuery 1.4. See doc for 1.8+

tomaytotomato Over a year ago

If I cannot use (), how do I pass parameters to a function this way? e.g. dateTime("DD/MM/YYYY")?

Armel Larcier Over a year ago

You don't. You can add data attributes to the elements ({"data-myvar": 12}) and get the values back in dateTime() with $(this).data('myvar')

Captain John · Accepted Answer · 2013-12-15 17:31:28Z

1

Suggest you need to review the keypress docs on jquery:

http://api.jquery.com/keypress/

You need to look at how to use document ready event in jquery too and how the selector engine works. Your code should look a bit like this:

$(function() {
    $("input").keypress(function() {
         //do stuff
    })
})

answered Dec 15, 2013 at 17:31

Captain John

2,0112 gold badges19 silver badges34 bronze badges

1 Comment

tomaytotomato Over a year ago

What is the advantages of doing that over just a html attribute?

Collectives™ on Stack Overflow

Creating input with onkeypress with jQuery?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related