博客

input表单监听


oninput="if(value >100){value = '100'}else if (value < 1 ){value = '1'}"

input中这行代码是限制输入框数据的大小

 <div class="b">-</div>
  <input type="number" id="inputa" value="1" oninput="if(value >100){value = '100'}else if (value < 1 ){value = '1'}">
  <div class="c">
    +
  </div>
  <div class="d">金币</div>
  <script>
    $(function() {
      $('.b').on('click', function() {
        var val = $(this).siblings('[type="number"]').val()  //获取表单数据
        if (val > 0) {
          val--
          $('#inputa').val(val)//填充表单数据 亲身实现如果这句代码不要将会获取的数据是一个重复的因为val值不变所以将他填充到新的表单里面可以实现动态渲染
          $('.d').text(100 * val) //这个是计算之外的div
          console.log(val);
        }
      })
      $('.c').on('click', function() {
          var val = $(this).siblings('[type="number"]').val()
          if (val < 100) {
            val++
            $('#inputa').val(val)
            $('.d').text(100 * val)
            console.log(val);
          }
        })
        //实时监听的 这个是输入表单触发的事件
      $('#inputa').on('input', function(e) {
        $('#inputa').val(e.target.value) //e.target是输入框自己输入的值
        $('.d').text(100 * e.target.value)
      })
    })

总结input表单实现监听必须使用两个事件，一个点击加减触发的外部事件，另一个是输入框字节实际输入的值