大家好,又见面了,我是你们的朋友全栈君。
需求:想要在一个input框输入的同时,另一个输入框的值实时变化!
但是easyui只提供了onchange事件,只有当第一个输入框的光标移开时才会触发事件,不能达到实时变化的效果。
于是开始各种百度,寻求easyui textbox 绑定事件的方法,但是无奈各种尝试都以失败告终!
但是机智的我突然灵光一闪,心生一计,瞬间药到病除,问题迎刃而解!闲言少叙,方案走你!
方案:通过easyui的自定义校验来实现(easyui的校验是实时的)
//validatebox 自定义校验
$.extend($.fn.validatebox.defaults.rules, {
//校验正整数,并计算码洋
calculateMY:{
validator : function(value) {
var reg = /^\d+$/;
if(reg.test(value)){
calculateMY(value);
return true;
}
return false;
},
message : ‘请输入正整数’
}
});
//html元素
<tr>
<td style=”padding-left:10px”>商品总数:</td>
<td align=”left”>
<input class=”easyui-textbox” type=”text” id=”number_edit”
data-options=”validType:’calculateMY’,required:true” />
</td>
</tr>
<tr>
<td style=”padding-left:10px”>码洋:</td>
<td align=”left”>
<input class=”easyui-textbox” type=”text” disabled=”disabled” id=”totalPrice_edit”/>
</td>
</tr>
//回调函数
function calculateMY(value){
var price =$(“#unitPrice_edit”).textbox(‘getValue’);
if(value==null||value==0){
$(“#totalPrice_edit”).textbox(‘setValue’,price*value);
}else{
$(“#totalPrice_edit”).textbox(‘setValue’,price*value);
}
}
此举虽为偷梁换柱,异曲同工,实现了想要的效果,但还是比较繁琐,如果大家有更好的方法,欢迎提出,大家共同进步!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/144131.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...