gpt4 book ai didi

javascript - 如何在用户输入的输入类型=文本中附加 % 符号?

转载 作者:行者123 更新时间:2023-11-30 11:54:16 25 4
gpt4 key购买 nike

我正在使用数字微调器,我希望输入的文本框中默认有 % 符号。我尝试使用跨度,但它在框外添加了符号。

最佳答案

您可以为此使用一个简单的 css 技巧,只需将其添加到您的代码中即可:

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

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

它使用::before 伪元素选择器将% 符号添加到文本框。这是工作示例:

(function ($) {
$('.spinner .btn:first-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
.spinner {
width: 100px;
}
.spinner input {
text-align: right;
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 1%;
vertical-align: middle;
display: table-cell;
}
.input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
margin-top: -2px;
border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
position: absolute;
top: 0;
left: 4px;
}

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

.spinner .input-group-btn-vertical::before {
content: "%";
position: absolute;
right: 18px;
top: 7px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div>
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

(也在 fiddle 中)

关于javascript - 如何在用户输入的输入类型=文本中附加 % 符号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38520503/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com