0

Here is what I am aiming to achieve :

A input which will contain text such as "100%", "54vh", or "32px".

I am trying to make use of the number input's up and down arrows, but I want the user to still be able to modify the text inside. It should not be able to add if it does not recognize a %, vh, or px symbol in front of it.

---------------
|  54px  | ^  |
|        | v  |
---------------
AutoBootDisk
  • 89
  • 1
  • 14
  • Possible duplicate of [Add a text suffix to ](https://stackoverflow.com/questions/49796934/add-a-text-suffix-to-input-type-number) – Christian Scott Oct 02 '18 at 00:59

1 Answers1

0

Number inputs don't recognize a value once you put strings on it. The best alternative you can do is to add a <select> tag for the units and concatenate the two values using (javascript or php). It should look like this:

<input type="number" name="value" value="">
 <select class="" name="unit">
   <option value="">%</option>
   <option value="">px</option>
   <option value="">vh</option>
 </select>

Aside from that, it's not safe to accept special characters ( %,/, etc.) in an input, so better do it like this.

Erlisar Vasquez
  • 460
  • 3
  • 13
  • It's an electron app, so security isn't an issue in this case. – AutoBootDisk Oct 02 '18 at 01:01
  • Another way I could think of is to customize a text input and add two buttons for up and down. Using javascript, on an onclick event, get the value and extract the number, then increment/decrement it (depending on what button is pressed). Then put it back to the input. – Erlisar Vasquez Oct 02 '18 at 01:05
  • I will mark this as correct if I am able to make this work using your tip. Don't think i'm not going to give you credit. – AutoBootDisk Oct 02 '18 at 01:58
  • Nice @AutoBootDisk. It's you who knows more about your app. So at the end it is still up to you which technique best fits your goal :) – Erlisar Vasquez Oct 03 '18 at 10:21