如何输入允许输入文字的数字？

Question

这是我的目标：

将包含诸如“ 100％”，“ 54vh”或“ 32px”之类的文本的输入。

我试图利用数字输入的上下箭头，但是我希望用户仍然能够修改其中的文本。如果它无法识别前面的％，vh或px符号，则应该无法添加。

---------------
|  54px  | ^  |
|        | v  |
---------------

Answer 1

一旦在字符串上输入数字，数字输入就无法识别它。最好的替代方法是为单位添加<select>标记，并使用（javascript或php）将两个值连接起来。它应该看起来像这样：

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

除此之外，在输入中接受特殊字符（％，/等）并不安全，因此最好这样做。