Я хочу создать ввод, содержащий целочисленное значение. Вводимое значение будет увеличиваться на 1 при нажатии кнопки caret-up и уменьшаться на 1 при нажатии кнопки cater-down.
Моя проблема в том, что стиль down-caret неправильный. Я хочу разместить down-caret вверху синего прямоугольника.
В настоящее время down-caret находится внизу div. Ниже приведено изображение текущего вывода.
Я пробовал несколько вещей, таких как гибкость, абсолютное положение и т. Д. Но это перекрывающиеся области Red div и Blue div.
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}/* style the qty div to display both input and buttons div in the same line*/
.qty {
width: 250px;
height: 50px;
}
/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
width: 230px;
float: left;
height: 100%;
}
/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
width: 220px;
height: 100%;
}
/* style the buttons div to display input and caret in the same line*/
#buttons {
width: 20px;
height: 100%;
float: right;
display: block;
}
/* style the action button to fit the height of the div*/
.action_btn {
height: 25px;
}
#plus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid red;
cursor: pointer;
}
#minus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid blue;
cursor: pointer;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<!-- change the fas to fa for the right class of font-awesome -->
<i class="fa fa-caret-up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
-1
22 Окт 2019 в 12:46
2 ответа
Ваше описание несколько неясно, если я правильно вас понял, посмотрите пример ниже, чтобы узнать, хотите ли вы этого или нет.
* {
box-sizing: border-box;
}
.qty {
position: relative;
}
.new {
position: absolute;
right: 0;
top: 0;
}
#plus_remind, #minus_remind {
margin: 0;
height: 24px;
width: 22px;
font: 33px/1 Arial,sans-serif;
cursor: pointer;
}
#plus_remind {
border: 1px solid blue;
}
#minus_remind {
border: 1px solid red;
}
input {
height: 48px;
font-size: 1.5rem;
margin: 0px;
padding: 0px;
line-height: 1.5rem;
width: 100%;
}<div class="qty">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
<div class="new">
<div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
<i class="fas fa-caret-up"></i>
</div>
<div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
<i class="fas fa-caret-down"></i>
</div>
</div>
1
22 Окт 2019 в 15:21
Для числа есть другое решение, в котором используется input с типом number.
<input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">Другой способ, я убираю использование font-awesome и создаю треугольник с помощью чистого CSS.
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}.qty {
width: 200px;
}
#remind_number_wrapper {
float: left;
}
i {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
cursor: pointer;
}
.up {
border-bottom: 5px solid black;
margin-bottom: 0px;
}
.down {
border-top: 5px solid black;
margin-top: 0px;
}<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<i class="up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="down"></i>
</div>
</div>
</div>
1
24 Окт 2019 в 12:09
Спасибо @ChickenSoups. У вашего более позднего решения есть проблема. Пожалуйста, проверьте. Спасибо.
–
24 Окт 2019 в 06:16
1
Какую проблему вы обнаружили? Я запускаю свой фрагмент кода и не вижу ничего странного! Обратите внимание, что я намеревался использовать значок
–
fa-caret-up в блоке minus_remind
24 Окт 2019 в 07:16
Пожалуйста, посмотрите изображение и нажмите
–
fa-caret-up, где показано на изображении. i.stack.imgur.com/1gEN4.png. Это уменьшающееся значение вместо увеличения. Спасибо.
24 Окт 2019 в 08:22
1
Спасибо, что указали на это. Итак, я обновил второй подход, убрав использование font-awesome. Вместо этого я рисую два треугольника с помощью чистого CSS.
–
24 Окт 2019 в 12:11
down caretв верхней частиBlue Bordered div. Если вам что-то непонятно, задайте мне вопрос.down caretв верхней частиBlue Bordered div. Если вам что-то непонятно, задайте мне вопрос. Я хотел бы иметь такое представление i.stack.imgur.com/pgiSy.png. Спасибо.