input表单监听

灰太狼 2023-01-14 06:59 135阅读 0赞

## 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表单实现监听必须使用两个事件，一个点击加减触发的外部事件，另一个是输入框字节实际输入的值

发表评论取消回复

表情：

评论列表（有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML笔记：表单input标签

> 摘要：微信搜索【[三桥君][Link 1]】 > 说明：这是关于HTML5的代码笔记一、理论知识表单标签 from：表单的最外层容器 input：标

短命女/ 2023年03月04日 10:30/ 0 赞/ 155 阅读

相关 input表单监听

input表单监听 `oninput="if(value >100){value = '100'}else if (value < 1 ){value = '1'}"`i

灰太狼/ 2023年01月14日 06:59/ 0 赞/ 136 阅读

相关 angular监听input事件_angular 监听input单选，多选值的变化

\{ \{item.name\}\}(\{ \{item.cnt\}\}) 页面效果是这样： ![Image 1][] ts的代码是这样的： getCheckList(

迷南。/ 2023年01月08日 15:25/ 0 赞/ 161 阅读

相关 vue 表单 input checkbox

<body> <div id="app"> <div> <span>爱好：</span>

分手后的思念是犯贱/ 2023年01月07日 08:49/ 0 赞/ 131 阅读

相关 vue 表单 input radio

<body> <div id="app"> <div> <span>性别：</span>

末蓝、/ 2023年01月07日 08:49/ 0 赞/ 191 阅读

相关 vue 表单 input text

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

不念不忘少年蓝@/ 2023年01月07日 08:47/ 0 赞/ 151 阅读

相关 input表单

![70][] ![70 1][]![70 2][] ![70 3][] input 输入值内容居中：text-align:center

一时失言乱红尘/ 2022年05月28日 05:27/ 0 赞/ 178 阅读

相关 vue监听input输入

想用vue监听input的输入，但是又懒得引入jquery，去网上查了资料，才找到方法。实现方法如下。 ![70][]用v-on来绑定，然后就可以动态获取input的值了

以你之姓@/ 2022年05月19日 03:39/ 0 赞/ 277 阅读

相关 vue 实时监听表单数据

vue 实时监听表单数据，代码如下 <template> <div> <input type="text" v-model="n

心已赠人/ 2022年01月29日 18:41/ 0 赞/ 409 阅读

相关 html 表单和表单域标签input、textarea、select

form表单标签学习：收集并提交form标签内form表单域中value数据，按照method提交方式给 action指定的提交地址

男娘i/ 2021年07月24日 15:23/ 0 赞/ 469 阅读