javascript - Input with type=number but add alphabetical suffix - Stack Overflow

admin管理员组

文章数量:1349880

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 e 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.

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 e 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.

• javascript
• css
• html

Share Improve this question Follow edited May 23, 2017 at 12:33 CommunityBot 111 silver badge asked Jun 12, 2015 at 0:19 Kevin WheelerKevin Wheeler 1,46222 gold badges1616 silver badges2727 bronze badges 3

• will "px" be the only unit you want to display or the user can select which unit he/she wants to display? – Saumil Commented Jun 12, 2015 at 0:44
• I will only be using "px". Bonus points for a more general solution though ;) – Kevin Wheeler Commented Jun 12, 2015 at 0:47
• If using bootstrap, here is the solution – Vibhor Dube Commented Jun 12, 2015 at 7:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

I suggest making it a bit wider and floating a <span>px</span> on top of the <input>. With a bit of CSS it will look like it is part of the input content.

So how about this general solution.

Create an extra input,

<input type="number" />
<input type="text" readonly value="px" class="unit"/> 

Now make the second input borderless as,

.unit{
border: none;
border-color: transparent;
width: 15px;
}

Just to throw it out there about how I was going to approach this before making this question. I was going to make an additional, identical <input> except not make it type="number" and make it position: absolute. That way it would stack directly under the actual <input ...>. I would then set its value to be " px" putting a space for every digit in the other input. As long as you use a monospaced font, the 'px' should be placed correctly. Browsers may end up overlapping it with arrows or something though, who knows.

Edit: I ended up just making an absolutely positioned, <label>, if you set the for property to be the id of your input, then when you click on the <label> it will focus the input and be ready for keypresses. Then you just change the css of the label to be cursor: text so that when you mouse over the label it has the right cursor. I tested this on IE9+, FF, Safari, and Chrome.

Please try following code

 <input type="number" />
<label id="label1">px</label>

We have consider Lable for FIX (px) value over here.

Please mark answer as right if helpful to you.

本文标签： javascriptInput with typenumber but add alphabetical suffixStack Overflow