js 实时监听input中值的变化，值改变时自动计算填充到另一个input中,实现计算器功能

最新推荐文章于 2023-12-29 23:26:56 发布
最新推荐文章于 2023-12-29 23:26:56 发布
阅读量1.4k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lc547913923/article/details/88542160
本文介绍了一个使用JavaScript实现的实时计算模型，当输入框中的值发生变化时，能够立即计算出两个输入值的乘积，并更新显示在页面上的结果。此功能适用于需要实时反馈计算结果的场景，如财务计算、折扣计算等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时监听input值的变化</title>
</head>
</script>
    <script type="text/javascript">
function sum(obj) {
   var a = document.getElementById("accountReceivable");
? ? ? ? ? ? var b = document.getElementById("vipdiscount");
var sum= a.value * b.value;

document.getElementById('testid').innerText=parseInt(sum);
receipts.value=parseInt(sum);
}


</script>
<body><table style="border-collapse:separate; border-spacing:0px 10px;">
 <tr>
  <td align="right">应收现金：</td>
  <td><input id="accountReceivable" name="accountReceivable" value="1" onkeyup="sum(this);" ></td>
  <td>元，折扣：</td>
  <td><input id="vipdiscount" name="vipdiscount"  value="1" onkeyup="sum(this);"  ></td>
  <td align="right">实收：</td>
  <td><input id="receipts" readonly="true" style="border:0px"></td>
  <td>元 </td>
  <td>消费类型：<select id="conType"><option value="1" >报名费</option><option value="2" >酒水零食费</option></select></td>
  <td><a id="btnSend" class="easyui-linkbutton">提交</a></td>
                                       
 </tr>
<tr><span id="testid">${accountReceivable}*${vipdiscount}</span></tr>
</table>

</body>
</html>

前端学习（205）:animation动画库
歌谣的博客
12-24 504
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
数据库之Redis运维手册（私人整理）
企业实战系列集 ●●● https://ximenjianxue.blog.youkuaiyun.com
11-20 7503
1、redis配置文件 #cat 8000.conf daemonize no #[yes/no]默认值no，该参数用于定制redis服务是否以守护模式运行。 pidfile /var/run/redis.pid #默认值/var/run/redis.pid，指定redis服务的进程号文件路径，以守护模式运行时需要配置本参数； port 8000 #默认值6379，指定redis服务...
js 实时监听input中值的变化，值改变时自动计算填充到另一个input中
csdy08的博客
10-18 6733
&lt;table style="border-collapse:separate; border-spacing:0px 10px;"&gt; &lt;tr&gt; &lt;td align="right"&gt;应收现金：&lt;/td&gt; &lt;td&gt;&lt;input id="accountReceivable" autoCom
JS监听键盘事件，并计算textarea内容长度
xYY_X_xYY的博客
05-06 394
使用onkeyup事件监听输入框内容长度，并显示在页面 效果展示 2. 代码展示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>输入文本</title> </head> <body> <p>字数限制在30字内，<span><span id="be"&
js input即时监听输入值
sdaq23的博客
06-08 342
总结一下 ：要想在输入框超过限制长度时候，不给输入。之前是用onkeyup做的。 不是即时监听，要等你松手后才能提示你已经超出输入长度，在进行截取。 如果要做成类似与到了显示输入长度 就无法输入的效果 要采用elem.onpropertychange（IE）或elem.addEventListener("input", textChange, false); function l...
Java开发面试题——很有帮助的
m0_46891419的博客
06-19 3471
面试题 一、Java 1.运行机制 1)Java跨平台原理 Java实现跨平台是JVM(Java虚拟机)起的作用。如果是C/C++的编译方式，一旦换了一个平台，那么就需要重新编译一份对应的可执行代码，但是Java则不同，编译好了一份Java字节码，换到不同的平台上时，并不需要重新编译，前提是这些平台上都安装了相应平台的JVM，JVM不是跨平台的。 2)垃圾回收器的基本原理是什么？垃圾回收器可以马上回收内存吗？有什么办法主动通知虚拟机进行垃圾回收？ 垃圾回收器通常是作为一个单独的低级别的线程运行，在不可预知的
VB速查大全(数据库、表格及报表编程) ★ VB错误处理，ado常见错误，VB数据类型等，网上有很多教程是错的，强烈建议看此文
ecz00的专栏
05-19 8707
VB异常处理 (很重要) ado常见错误 ado游标及锁定介绍 免费报表控件 免费表格控件 vb数据类型(很多程序出问题出在这个，一定要看，VB msdn说的不太对) VB可用的AES加密sqlite_odbc 及 cairo_sqlite (VBRichClient自带的非odbc连接) 有vbRichClient代替winsock、实现vb多线程及远程调用activeX等
Matlab脚本编写速成
本论文系统性地探讨了Matlab脚本编程的基础知识、数值计算与数据处理、函数使用、图形用户界面设计以及算法实现等关键方面。首先，介绍了Matlab脚本的基础和数值计算的核心技术，包括矩阵操作、数据分析与可视化、...
input 改变时触发_触发器
weixin_30237677的博客
12-19 660
触发器是同步的双稳态器件。在这种情况下，术语“同步”的意思是输出状态的变化只发生在触发输入称为时钟的一个特定的点处(前沿或后沿)，时钟被指定为控制输入C；也就是说，输出变化的出现与时钟同步。触发器对时钟边沿敏感，而门控锁存器是对电平敏感。边沿触发器的状态改变仅出现在时钟脉冲的正边沿(上升沿)或者负边沿(下降沿)上，并且只有在时钟的这个转换瞬间才对它的输入做出响应。本节介绍两种类型的边沿触发器: D...
监听表单Input框的输入值value，自动计算填充赋值到另一个input框（几个input框自动合计）
weixin_42618492的博客
08-02 1万+
例如：计算工资组成（总薪资框readonly，随其他薪资组成框的value输入值改变而改变） HTML代码：略过~根据自己布局情况而定！！！！ 重点：给你需要监听的input框绑定onkeyup事件（onkeyup 事件会在键盘按键被松开时发生。） 在onkeyup事件中，绑定你的方法（这里是合计） JS：监听input框的值，进行合计 重点：针对浮点数精度丢失，这里要处理...
使用动态监听方法实现js简单加减乘除
pigpigzzz的博客
02-06 282
js动态监听
input输入数值自动计算
qq_44211323的博客
07-08 6544
有很多时候我们需要在一些输入框输入某一些内容后然后就在其他地方显示出来一些结果，例如计算一些和、差、商、积等等，也可以有复杂的运算，只要符合你的需求即可。 例如下面一个例子的，通过填写去程预计时间和回程预计时间计算出总预计时间，其实方法很简单，就是获取到去程和回程的预计时间一加起来就是总预计时间了。 但是我们在页面上只能给输入框输入数值，这需要电脑自己去计算。需要让电脑自己执行计算...
jQuery/原生JS实时监听input输入框值变化
那一日面朝大海的博客
09-24 5867
首先看一下dom中input事件： onpropertychange： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。 oninput：是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发
js实时监听input输入框值的变化
weixin_45342302的博客
12-29 3535
刚开始在这里踩了个坑，我以为event.target.value的值是null，所以条件写成了if(event.target.value == null)，数据一直无法清空。后来我改成了空字符串if(event.target.value == '')就对了。做了一个简单的html网页，用到了ajax技术。方案二：在点击加载按钮的时候，先将元素内容清空再进行ajax请求，直接在点击事件触发的方法里清空数据即可。过程中遇到的问题：当我清空keyword值后，上一次搜索的cas和mw依然存在。
计算器及事件监听
weixin_30446197的博客
06-26 285
import java.awt.*;import java.awt.event.*;import java.util.Date;import javax.swing.*;public class 个人信息{ public static void main(String arg[]) { Frame f=new Frame("个人信息"); f.setSize...
input事件 input框输入过程中value值改变时触发 js写法
qq_70020706的博客
11-29 4295
input事件 input框输入过程中value值改变时触发 js写法
input 内容改变的触发事件
MaQuanXin的博客
06-28 1359
input 内容改变的触发事件 onchange onchange 事件会在域的内容改变时触发。支持的标签, , ,。 注意：在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。 缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的function() 或者调.change()方法。 JS： <input type="text" id="cc" o...
js 实时监听input中值变化
热门推荐
懒虫一个V
05-11 29万+
RunJS 实时监测input中值的变化
el-date-picker如何监听input输入框中值的变化
最新发布
05-22
### 如何监听 el-date-picker 组件中 input 输入框值的变化 `el-date-picker` 是 Element UI 中用于日期选择的一个重要组件。当需要监听其内部 `input` 的值变化时，可以通过多种方式实现。 #### 方法一：通过 `v-model` 和自定义逻辑监听 可以利用 Vue.js 的双向绑定特性来监控 `v-model` 所绑定的数据变量。每当用户更改输入框中的值或者选择了新的日期时，该数据会自动更新并触发相应的事件。 ```javascript data() { return { value1: '' // 与 el-date-picker 绑定的模型 }; }, watch: { value1(newVal, oldVal) { console.log('Input Value Changed:', newVal); // 当值发生变化时执行的操作 } } ``` 这种方法适用于大多数场景，并且能够很好地配合 Vue 的响应式机制工作[^1]。 #### 方法二：使用原生 DOM 监听器 如果希望更深入地控制行为，则可以直接操作 DOM 来附加额外的功能。例如，在某些情况下可能需要阻止默认的行为或进一步验证用户的输入： ```javascript methods: { timeEditable() { this.$nextTick(() => { const inputs = document.querySelectorAll('.el-date-editor input'); for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('input', function () { console.log('Direct Input Detected:', this.value); }); } }); } } ``` 需要注意的是这种方式可能会破坏框架原有的封装性和一致性，因此应谨慎采用[^4]。 #### 方法三：借助内置事件回调函数 Element Plus 或者较新版本的 Element UI 提供了一些特定于日期选取过程中的钩子函数，比如 `@change`, `@blur` 等等。这些都可以用来间接达到监视目标的效果: ```html <el-date-picker v-model="value1" type="datetime" @change="handleChange"> </el-date-picker> ``` ```javascript methods:{ handleChange(value){ console.log(`Selected Date is ${value}`); } } ``` 此外还有其他类似的交互动作也可以被捕捉到，具体取决于实际项目里的需求设定[^3]。 --- ### 总结 综上所述，对于想要获取 `el-date-picker` 内部 input 动态改变情况的应用开发者来说，推荐优先考虑基于 Vue 数据驱动的设计思路即 **方法一**；而针对特殊定制化要求则可以选择结合 JavaScript 原始 API 实现更为灵活的结果——也就是所谓的 **方法二** 。当然也不要忽略官方文档里给出的各种实用接口选项哦！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值