HTML text input size

Question

I have a text input created dynamically with javascript where I am putting some text with javascript also. I would like to make the text input size variable, dependent on the text length and with maximum width of 70%

For that, I am using:

'<input type="text" style="max-width:70%" name="affiliation"
 id="affiliation'+affiliation_id+'" value="'+article_affiliations[i].name+'"
 size='+article_affiliations[i].name.length+'/>'

Everything works fine when the text is longer than 68% but when not, the text input area is smaller than the text size.

For example, when the text size is 118, the textarea wil be only 106 characters length and I don't know why. Any help and suggestion will be highly appreciable.

Thank you.

What is "size?" Length in characters? Height in pixels? Width in pixels? And why are there so many ; between the attributes of the input element? — Aaron Digulla
– Aaron Digulla, Commented Sep 5, 2012 at 12:19
@AaronDigulla The size attribut in html is the length in characters. — Milos Cuculovic
– Milos Cuculovic, Commented Sep 5, 2012 at 12:25

Ahsan Khurshid · Accepted Answer · 2012-09-05 12:41:31Z

3

Javascript:

function incSize(event) {
   var size = event.value.length; 
   event.setAttribute("size", size);
   event.setAttribute("style", "width:auto")    
}

HTML:

<input type="text" name="affiliation" onkeyup="incSize(this)" size="1" />

DEMO

answered Sep 5, 2012 at 12:41

Ahsan Khurshid

9,4671 gold badge35 silver badges53 bronze badges

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

2 Comments

Milos Cuculovic Over a year ago

Thank you A.K. In fact, I don't need to cach the keyup because I am populating the text input also with javascript.

Abadaba Over a year ago

As you type really long numbers, the first digit starts to go off to the left, not an ideal solution.

Community · Accepted Answer · 2017-05-23 11:53:20Z

0

Remove the style attribute then try this:

$('input[type="text"]').keyup(function(){
  $(this).attr({width: 'auto', size: $(this).val().length});
});

Make sure no CSS styles are overriding the width. Got the answer from here: Dynamically resize input

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Sep 5, 2012 at 12:23

Atom Vayalinkal

2,7328 gold badges30 silver badges38 bronze badges

2 Comments

Milos Cuculovic Over a year ago

Thank you for the answer but I would like to use only javascript and HTML, no JQuerry.

Ahsan Khurshid Over a year ago

@Milos: See my answer with a javascript solution.

Collectives™ on Stack Overflow

HTML text input size

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related