Javascript – Input with type=number but add alphabetical suffix

csshtmljavascript

I have <input type="number"></input>. I like the fact that it has type="number" since I want numeric input from the user. I would rather not change its type away from number. However, I would like to display the units after the number. So I want the input to read "5 px" if the unit is in pixels. I want the user to be able to edit the 5 part, but not the px part. The solution found here will not work unless I do more gimmicks and make it hackier, because the "px" would come after the up/down arrows in chrome. These are the arrows I'm talking about![example of arrows][1]

On my environment in chrome, you can just put alphabetical characters in the <input ...>, but this is technically not legal

I need a solution that works on firefox, chrome, safari, and IE9.

Best Solution

You can achieve this using following code: HTML:

 <div class="size-input-wrapper">
    <label for="inputValidation">Enter size:</label>
    <input type="number" id="inputValidation" placeholder="size"/>
    <span class="pxSpan">px</span>
 </div>

CSS:

.size-input-wrapper {
    max-width: 208px;
    margin: auto;
    position: relative;
    display: inline-block;
}
#inputValidation {
    padding-right: 35px;
}
.pxSpan {
    position: absolute;
    top: 19px;
    right: 10px;
}

FIDDLE HERE

Alternatively, you can use bootstrap for easier implementation. Check this FIDDLE