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

最新推荐文章于 2023-12-29 23:26:56 发布
最新推荐文章于 2023-12-29 23:26:56 发布
阅读量1.4k 收藏
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lc547913923/article/details/88542160
版权

<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" οnkeyup="sum(this);" ></td>
  <td>元，折扣：</td>
  <td><input id="vipdiscount" name="vipdiscount"  value="1" οnkeyup="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>

ThinkerFuther
关注
专栏目录
前端学习（205）:animation动画库
歌谣的博客
12-24 435
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
js 实时监听input中值的变化，值改变时自动计算填充到另一个input中
lc547913923的专栏
03-13 745
&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" autoCompl
JS监听键盘事件，并计算textarea内容长度
xYY_X_xYY的博客
05-06 327
使用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 302
总结一下 ：要想在输入框超过限制长度时候，不给输入。之前是用onkeyup做的。 不是即时监听，要等你松手后才能提示你已经超出输入长度，在进行截取。 如果要做成类似与到了显示输入长度 就无法输入的效果 要采用elem.onpropertychange（IE）或elem.addEventListener("input", textChange, false); function l...
js 实时监听input中值变化 onchange onblur改变值
邱海健的博客
04-17 4722
!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <script id="jquery_183" type="text/javas...
vue监听多个input改变_vue 完美监听input值变化
weixin_32617915的博客
12-31 3871
1、vue中实时监听input值的变化，停止输入300ms后去请求，而不是时时请求数据2、解决异步请求可能会发生先请求后返回问题，导致结果列表不是预料展示的效果一、问题做搜索功能时，监听input的value值变化实时请求数据，每增加一个字符，就发送一次请求。例如输入12345，会监听到5次变化1 12 123 1234 12345，导致连续请求5次。这是没必要的，增加服务器负担，可能出现卡顿的情...
js 实时监听input中值变化
qq_44949838的博客
05-01 834
js 实时监听input中值变化
input 改变时触发_触发器
weixin_30237677的博客
12-19 596
触发器是同步的双稳态器件。在这种情况下，术语“同步”的意思是输出状态的变化只发生在触发输入称为时钟的一个特定的点处(前沿或后沿)，时钟被指定为控制输入C；也就是说，输出变化的出现与时钟同步。触发器对时钟边沿敏感，而门控锁存器是对电平敏感。边沿触发器的状态改变仅出现在时钟脉冲的正边沿(上升沿)或者负边沿(下降沿)上，并且只有在时钟的这个转换瞬间才对它的输入做出响应。本节介绍两种类型的边沿触发器: D...
监听表单Input框的输入值value，自动计算填充赋值到另一个input框（几个input框自动合计）
weixin_42618492的博客
08-02 9892
例如：计算工资组成（总薪资框readonly，随其他薪资组成框的value输入值改变而改变） HTML代码：略过~根据自己布局情况而定！！！！ 重点：给你需要监听的input框绑定onkeyup事件（onkeyup 事件会在键盘按键被松开时发生。） 在onkeyup事件中，绑定你的方法（这里是合计） JS：监听input框的值，进行合计 重点：针对浮点数精度丢失，这里要处理...
使用动态监听方法实现js简单加减乘除
pigpigzzz的博客
02-06 216
js动态监听
input输入数值自动计算
qq_44211323的博客
07-08 6401
有很多时候我们需要在一些输入框输入某一些内容后然后就在其他地方显示出来一些结果，例如计算一些和、差、商、积等等，也可以有复杂的运算，只要符合你的需求即可。 例如下面一个例子的，通过填写去程预计时间和回程预计时间计算出总预计时间，其实方法很简单，就是获取到去程和回程的预计时间一加起来就是总预计时间了。 但是我们在页面上只能给输入框输入数值，这需要电脑自己去计算。需要让电脑自己执行计算...
jQuery/原生JS实时监听input输入框值变化
那一日面朝大海的博客
09-24 4035
首先看一下dom中input事件： onpropertychange： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。 oninput：是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发
js实时监听input输入框值的变化
最新发布
weixin_45342302的博客
12-29 2673
刚开始在这里踩了个坑，我以为event.target.value的值是null，所以条件写成了if(event.target.value == null)，数据一直无法清空。后来我改成了空字符串if(event.target.value == '')就对了。做了一个简单的html网页，用到了ajax技术。方案二：在点击加载按钮的时候，先将元素内容清空再进行ajax请求，直接在点击事件触发的方法里清空数据即可。过程中遇到的问题：当我清空keyword值后，上一次搜索的cas和mw依然存在。
计算器及事件监听
weixin_30446197的博客
06-26 256
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 3945
input事件 input框输入过程中value值改变时触发 js写法
input 内容改变的触发事件
MaQuanXin的博客
06-28 1258
input 内容改变的触发事件 onchange onchange 事件会在域的内容改变时触发。支持的标签, , ,。 注意：在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。 缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的function() 或者调.change()方法。 JS： <input type="text" id="cc" o...
如何利用python将一个asc文件中值替换到另一个Asc文件中并不改变被替换asc文件格式
04-02
可以使用Python的numpy库读取和写入ASC文件，并使用numpy的数组操作来实现替换值的功能，而不改变被替换ASC文件的格式。以下是一个示例代码： ```python import numpy as np # 读取需要替换值的ASC文件 asc1 = np.loadtxt('file1.asc', skiprows=6) # 读取需要替换成的值的ASC文件 asc2 = np.loadtxt('file2.asc', skiprows=6) # 将asc1中的值替换为asc2中的值 asc1[asc1 > 100] = asc2[asc1 > 100] # 将替换后的asc1写入新的ASC文件 header = '' with open('file1.asc', 'r') as f: for i in range(6): header += f.readline() np.savetxt('new_file.asc', asc1, header=header, fmt='%.2f') ``` 这个示例代码假设ASC文件中的数据都是浮点数，并且文件的前6行是头文件，需要跳过。代码中的替换操作是将ASC文件中大于100的值替换为另一个ASC文件中相同位置的值。可以根据实际情况修改替换条件和方式。最后，将替换后的数组写入新的ASC文件，保留原有的头文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值