How to Resize <input>

Question

How do you restrict the number of characters that can be entered and how to change width and height?
I tried using the attributes width and height
Please Help!!

Answer 1

Yes: you could even put the body function directly inlined in the 'oninput' attribute ;)

Answer 2

https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome

maxlength isn't supported for <input type="number">...

Answer 3

https://code.sololearn.com/WLtKPB0ae6Z0/?ref=app

Simple implementation...

Answer 4

<input type='text' maxlength='10' style='width:200px;height:50px;'>

Answer 5

It should work... and works for me: are you sure to not have some typo mistake? What's your context (browser, os, versions)?

Answer 6

I tried it and it seems to work only with numbers, not letters... weird

Answer 7

@Russel Reeder:

It works as well with digit as with letters ^^

@Mamex86:

I cannot try it on desktop (I'm on mobile and don't have desktop near of me)... but actually on Android Samsung internet browser (probably based on Chrome) it works...

What OS? Wich version of each?
These informations are essential to study the same context (in case of some bug linked to a particular version ^^)

And could you copy-paste your code, to verify your syntax? ;)

Answer 8

First answer of the linked thread suggest a workaround with 'min' and 'max' attribute values... but it's fail too ^^

I don't have read the whole thread, so I suggest you to first read it entirely and test proposed solution ;)

Anyway, what I would do, would be to set the 'oninput' event listener with a function validating input on the fly, and doesn't allow more than n char (by updating the 'value' attribute value with last entry (before reaching the limit) or by truncating the value to the max length expected ^^

Answer 9

doesn't work

Answer 10

Now it works ^^

Answer 11

but maxlength doesn't work

Answer 12

visph. I am running in Chrome.

Answer 13

For me, maxlength works when your type is set to 'text'.
But when you set it to 'number' it fails to restrict the number of characters

Answer 14

I am on Chrome 58.0.3029.81 (64-bit)
Windows 8.1

https://code.sololearn.com/WL2999KjTtq1/?ref=app

Answer 15

Right what should I use then?

Answer 16

Ok Thank you. I always like looking for the solution with built-in html first. I feel that there is a workaround for it in raw html.
Thank you for your idea though. Greatly appreciate your time

Answer 17

Cool That's perfect and it's just a few lines ☺