easyui textbox 绑定oninput事件

easyui textbox 绑定oninput事件需求:想要在一个input框输入的同时,另一个输入框的值实时变化!但是easyui只提供了onchange事件,只有当第一个输入框的光标移开时才会触发事件,不能达到实时变化的效果。于是开始各种百度,寻求easyuitextbox绑定事件的方法,但是无奈各种尝试都以失败告终!但是机智的我突然灵光一闪,心生一计,瞬间药到病除,问题迎刃而解!闲言少叙,方案走你!方案:通过easyui

大家好,又见面了,我是你们的朋友全栈君。

需求:想要在一个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);
}
}

此举虽为偷梁换柱,异曲同工,实现了想要的效果,但还是比较繁琐,如果大家有更好的方法,欢迎提出,大家共同进步!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/144131.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 2D网络游戏(2d网络游戏大全列表)

    2D网络游戏开发(网络篇)(一) 作者:akinggw “2D网游开发”,我有时都觉得这个标题包含的内容太多,要实现起来也太难。于是,我决定将它分门别类,我按照我要实现的一个网络游戏将它分成下面几个部分: l      客户端l      网络端l      服务器端l      网页端 我们来讲解一下,我们分别要在每个端口完成什么内容: 

    2022年4月16日
    101
  • python用turtle画彩虹,画春天

    python用turtle画彩虹,画春天

    2021年3月12日
    1.2K
  • unity自学入门_unity 教程

    unity自学入门_unity 教程六本书Unity5权威讲解Unity3DNGUI实战教程Unity5实战使用C和Unity开发多平台游戏Unity3D人工智能编程Unity官方案例精讲UnityShader入门精要1.Unity5权威讲解#目录第1章 Unity5简介 11.1 Unity3D游戏引擎的诞生 21.2 Unity5的优势 21.2.1 支持多平台 21.2.2 集

    2022年8月30日
    5
  • Kettle工具使用及总结

    Kettle工具使用及总结Kettle工具使用及总结,kettle主要用于数据清洗,即常见ETL工具,拥有图形化界面且免费的优点。其下载包直接解压打开就能用,遇到的问题:1.连接MySQL报错:①报错:Driverclass’org.gjt.mm.mysql.Driver’couldnotbefound,makesurethe’MySQL’driver(jarfile)isinstalled.org.gjt.mm.mysql.Driver原因:没有识别

    2022年10月17日
    3
  • 随机梯度下降法介绍及其参数讲解「建议收藏」

    随机梯度下降法介绍及其参数讲解「建议收藏」随机梯度下降法算法介绍简单来说,梯度下降就是从山顶找一条最短的路走到山脚最低的地方。但是因为选择方向的原因,我们找到的的最低点可能不是真正的最低点。如图所示,黑线标注的路线所指的方向并不是真正的地方。既然是选择一个方向下山,那么这个方向怎么选?每次该怎么走?先说选方向,在算法中是以随机方式给出的,这也是造成有时候走不到真正最低点的原因。如果选定了方向,以后每走一步,都是选择最陡的方向,直到最低点。总结起来就一句话:随机选择一个方向,然后每次…

    2022年7月19日
    32
  • Java面试-面向对象

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 Q1。什么是多态? 多态被简要描述为“一个接口,许多实现”。多态性是能够在不同上下文中为某事物赋予不同含义或用法的一…

    2021年6月23日
    101

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号