CODEWITHSUNDEEP
jquery
eyered
eyered

Reputation: 117

How can I set the 'size' attribute for the element <input> using an attribute object?

I am a jQuery beginner and have come across one of the methods to create a new element on the page. I am able to create the element fine. However, one of the attributes (size) defaults to 20 even though I clearly state that it should be bigger. Is this a jQuery bug, or am I missing something? The other attributes in the attribute object (type, autofocus) work fine.

The code I am using is this:

$('<input>', {
  'type' : 'text',
  'size' : 50,
  'autofocus' : 'true'
});

I do not have any CSS file.

When I use the attr() method, I am able to set the size. But I want to know that I am not the only one who is unable to set the size attribute for the element using an attribute object. I am using jQuery 1.9.1.

Any answers will be appreciated.

Upvotes: 7

Views: 423

Answers (3)

suff trek
suff trek

Reputation: 39777

As a workaround you can use "Size" with capital S:

$('<input>', {
  'type' : 'text',
  'Size' : 50,
  'autofocus' : 'true'
});

http://jsfiddle.net/g9Hct/

Upvotes: 2

j08691
j08691

Reputation: 207901

Use the .prop() function:

$('<input>', {
  'type' : 'text',
  'autofocus' : 'true'
}).prop('size','50');

Or this syntax:

$('<input>', {
   'type': 'text',
    prop: {
        size: "50"
    },
   'autofocus': 'true'
})

jsFiddle example

Here's the old bug report when it was discovered and the explanation as to why they didn't re-enable the old functionality.

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

Interesting. I don't know why this is happening and can only assume that this is a jQuery bug as you assume.

You're already aware of using attr() to set the size, but for reference you can call that straight after creating the element (prior to adding it to the page or affecting it in any other way):

$('<input>', {
  'type' : 'text',
  'autofocus' : 'true'
}).attr('size', 50);

Another approach would be to simply add the attributes within the selector:

$('<input type="text" autofocus="true" size="50">');

JSFiddle demo of both in action.

Upvotes: 0

Related Questions