input с боковыми кнопками

305

04 октября 2017, 08:23

Есть HTML-код с инпутом, в котором числовые значения, там же кнопки увеличения\уменьшения. Как с помощью Jquery сделать эти кнопки по бокам от инпута? Заранее спасибо.

<input type="number" 
class="input-text qty text" 
step="1" min="1" max="" 
name="quantity_12730" 
value="1" 
title="Кол-во" size="4" 
pattern="[0-9]*" inputmode="numeric">

Answer 1

Как вариант:

var count = $('input').val(); 
 
$('#left').click(function(){ 
   count--; 
   $('input').val(count); 
}); 
 
$('#right').click(function(){ 
   count++; 
   $('input').val(count); 
});

div { 
  display: inline-block; 
  vertical-align: top; 
} 
 
#left, #right { 
  cursor: pointer; 
  font-weight: bold; 
} 
 
.wrapper { 
  width: 50px; 
  overflow: hidden; 
} 
 
input { 
  width: 60px; 
  outline: none; 
  border: none; 
  padding-left: 20px; 
}

<div id="left"> 
< 
</div> 
<div class="wrapper"><input type="number"  
class="input-text qty text"  
step="1" min="1" max=""  
name="quantity_12730"  
value="1"  
title="Кол-во" size="4"  
pattern="[0-9]*" inputmode="numeric"></div> 
<div id="right"> 
> 
</div> 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>