javascript - 使输入数字字段的最右边部分不可编辑

Question

我想要这样的东西:

这里的%符号会默认出现在输入框内，无法编辑或删除。用户只能编辑 % 符号左侧的数字。当按下向上或向下箭头时，只有 % 符号左边的数字会增加或减少。

例如，如果我现在按向上箭头，它会显示

11%

，如果我按下箭头，它会显示

9%

我看过一些保持输入字段最左边部分不可编辑的示例，但在这里我需要最右边的部分不可编辑。

Answer 1

请看这个JSfiddle .我认为这会对您有所帮助。

<input id="edit_input" type="number"  style="width:80px;"></input>
<p>%</p>

input {
  float:left;
  font-size: 16px;
  padding: 0px 0 0px 0px;
  box-sizing:border-box;
}
p {
 margin:-4px 0px 0px -50px;
float:left;
padding-top: 5px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
 font-size: 20px;
}