如何进行允许文本的数字输入？

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>

除此之外，在输入中接受特殊字符（%、/ 等）是不安全的，所以最好这样做。