Javascript 如何在用户输入的输入类型=文本中附加%symbol？

我使用的是数字微调器，我希望在默认情况下，输入文本框中有%symbol。我尝试使用span，但它在框外添加了符号

您可以使用jQuery更改事件来完成。它将在输入的末尾添加“%”符号

（函数（$）{
var minNumber=-100；
var maxNumber=100；
$（'.spinner.btn:类型的第一个'）.on（'click'，function（）{
if（$（'.spinner输入'）.val（）==maxNumber）{
返回false；
}否则{
$（'.spinner input'）.val（parseInt（$（'.spinner input'）.val（），10）+5+'%'）；
}
});
$（'.txtinput'）。打开（“更改”，函数（）{
var inputVal=parseFloat（$（this）.val（）.replace（'%，''）| | 0
如果（minNumber>inputVal）{
inputVal=-100；
}else if（maxNumber

检查以下内容：


（函数（$）{
var minNumber=-100；
var maxNumber=100；
$（'.spinner.btn:类型的第一个'）.on（'click'，function（）{
if（$（'.spinner输入'）.val（）==maxNumber）{
返回false；
}否则{
$（'.spinner input'）.val（parseInt（$（'.spinner input'）.val（），10）+5+'%'）；
}
});
$（'.spinner.btn:类型的最后一个'）.on（'click'，function（）{
if（$（'.spinner输入'）.val（）==minNumber）{
返回false；
}否则{
$（'.spinner input'）.val（parseInt（$（'.spinner input'）.val（），10）-5+'%'）；
}
});
$（“.spinner输入”）.on（“输入”，函数（）{
var intValue=parseInt（$（this）.val（）.replace（/%/g'，）|0；
$（this.val（intValue+'%'）；
});
})（jQuery）

向上的
向下
您可以使用一个简单的css技巧，只需在代码中添加以下内容：

.spinner input {
  padding-right: 13px;
}

.spinner .input-group-btn-vertical::before {
  content: "%";
  position: absolute;
  right: 18px;
  top: 7px;
}

它使用：：在伪元素选择器之前将%符号添加到文本框中。下面是一个工作示例：


（函数（$）{
$（'.spinner.btn:类型的第一个'）.on（'click'，function（）{
$（'.spinner-input'）.val（parseInt（$（'.spinner-input'）.val（），10）+1）；
});
$（'.spinner.btn:类型的最后一个'）.on（'click'，function（）{
$（'.spinner-input'）.val（parseInt（$（'.spinner-input'）.val（），10）-1）；
});
})（jQuery）
.spinner{
宽度：100px；
}
.微调器输入{
文本对齐：右对齐；
}
.输入组btn垂直{
位置：相对位置；
空白：nowrap；
宽度：1%；
垂直对齐：中间对齐；
显示：表格单元格；
}
.输入组btn垂直>.btn{
显示：块；
浮动：无；
宽度：100%；
最大宽度：100%；
填充：8px；
左边距：-1px；
位置：相对位置；
边界半径：0；
}
.输入组btn垂直>.btn:第一个子{
边框右上角半径：4px；
}
.input group btn vertical>.btn:最后一个子项{
页边顶部：-2px；
边框右下半径：4px；
}
.输入组btn垂直i{
位置：绝对位置；
排名：0；
左：4px；
}
.微调器输入{
右侧填充：13px；
}
.spinner.input组btn vertical:：before{
内容：“%”；
位置：绝对位置；
右：18px；
顶部：7px；
}

自举3输入微调器
它工作正常。%符号显示在文本框内。你的问题是什么？不，当我使用上下键时，它会附加百分比符号，但当我在输入框中手动添加一些数字时，它只显示数字而不显示百分比符号。你能提供小提琴吗？如果你继续键入数字，它会不断添加多个
%
符号。这不正常。它在每个键条目上添加了百分比符号！@Mohit Bhardwaj@PriyankaPachori I将事件从keyup更改为change，请检查。此代码允许我输入大于100和小于-100的值，而我已经将最大值和最小值分别定义为100和-100。@PriyankaPachori I更新了代码，因此，如果输入大于100，它将设置为100，如果小于-100，它将设置为-100（但使用按钮，我可以将其更改为大于100或小于-100。这是有意的吗？）如果我在文本框中输入任何单词，它将显示NaN%，甚至文本框都没有响应。@ArunCM请检查更新的代码。如果您输入了无效的数字，例如
abc
，则显示
0%
（前面显示为
NaN%
）。文本框不会停止响应。它同时适用于向上和向下按钮，您可以通过鼠标或
shift+箭头
输入值或删除值<代码>退格
无效，因为每次单击退格，它都会删除
%
符号，并且代码逻辑会在末尾再次附加
%
符号。所以，它似乎没有响应。我无法删除和重新输入。退格可能不起作用。@PriyankaPachori是的，退格不起作用。您可以使用鼠标选择多个字符，也可以在按住shift键的情况下按后退箭头键。如果你点击backspace，它似乎会起作用。此外，您可以只为backspace键添加一个条件。谢谢，是的，它应该是：：before，我刚刚编辑了答案。