Как сделать свой переключатель цифр в input?

301

25 января 2017, 00:01

Нужно что бы верхняя стрелка меняла значение в input на +1, а нижняя на -1. минимальное значение было 0, а максимальное 9. помогите пожалуйста пример

<ul class="test">
  <li class="entering-numbers">
    <div class="arrow-up"></div>
    <div class="arrow-down"></div>
    <input type="text" value="4" readonly>
    <label> 123</label>
  </li>
</ul>

Answer 1

var input = document.getElementById('input'); 
var up = document.getElementById('up'); 
var down = document.getElementById('down'); 
 
function isValid(n) { 
	let min = 0; 
	let max = 9; 
    if (n >= min && n <= max) { 
    	return true; 
    } 
    return false; 
} 
 
up.addEventListener('click', function(e){ 
	let n = parseInt(input.value); 
    ++n; 
	let val = isValid(n); 
	if(!!val) { 
		input.value = n; 
	    console.log("Inc: %d", n); 
    } 
}); 
 
down.addEventListener('click', function(e){ 
	let n = parseInt(input.value); 
    --n; 
	let val = isValid(n); 
	if(!!val) { 
		input.value = n; 
	    console.log("Dec: %d", n); 
    } 
});

.entering-numbers > input { 
	width: 15px; 
	float: left; 
	display: inline-block; 
	margin: 0 10px 40px 0; 
	height: 15px; 
	text-align: center; 
	background-color: #efbd16; 
	border-radius: 2px; 
	border: none; 
	color: #1c1c1c; 
	font-family: GothamPro; 
	font-size: 12px; 
	font-weight: 500; 
} .entering-numbers > label:after { 
	display: none; 
} 
.entering-numbers > label:befor { 
	display: none; 
} 
 
.arrow-up { 
	cursor: pointer; 
	position: absolute; 
	    top: 4px; 
    left: 49px; 
	width: 0; 
	height: 0; 
	border-left: 7.5px solid transparent; 
  border-right: 7.5px solid transparent; 
  border-bottom: 9px solid #efbd16; 
} 
.arrow-down { 
	cursor: pointer; 
	position: absolute; 
	    top: 36px; 
    left: 49px; 
	width: 0; 
	height: 0; 
	border-left: 7.5px solid transparent; 
  border-right: 7.5px solid transparent; 
  border-top: 9px solid #efbd16; 
}

<ul class="test"> 
  <li class="entering-numbers"> 
    <div class="arrow-up" id="up"></div> 
    <div class="arrow-down" id="down"></div> 
    <input type="text" value="4" id="input" readonly> 
    <label> 123</label> 
  </li> 
</ul>