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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm html注释快捷键_python一键注释

    pycharm html注释快捷键_python一键注释pycharm中同时注释多行代码快捷键:1、选中要注释的代码,然后Ctrl+’/’具体效果:importmatplotlib.pyplotaspltdata_dir=’D:/Python/neuralnetwork/CIFAR10-Guoqingxu/data/’BATCH_SIZE=2image_batch,label_batch=read_cifar10(data_d…

    2022年8月25日
    8
  • Tensorflow数据读取之tfrecord

    Tensorflow数据读取之tfrecord文章目录tfrecordtfrecord的使用流程写入tfrecord文件读取tfrecord文件tfrecord中的数据格式tfrecord中对于变长数据和定长数据的处理tfrecord中生成batch_data的方法插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数…

    2025年6月11日
    3
  • hibernate执行原生sql_hibernate的find方法

    hibernate执行原生sql_hibernate的find方法如果查询返回多个值用list()方法[java] viewplaincopyprint?public void testQuery(){          Configuration config = new Configuration().configure();          SessionFactory factory =

    2025年8月27日
    16
  • linux防火墙放行端口命令_防火墙端口查看

    linux防火墙放行端口命令_防火墙端口查看首先确保防火墙是开着的#查看防火墙状态systemctlstatusfirewalld#开启防火墙systemctlstartfirewalld防火墙放行端口1.添加端口6666代表端口号firewall-cmd–zone=public–add-port=6666/tcp–permanent2.刷新生效firewall-cm…

    2022年9月22日
    3
  • 关于Python缩进,我们该了解哪些?

    关于Python缩进,我们该了解哪些?Python是一门独特的语言,它的代码块是通过缩进(Indentation)来标记的(大部分语言都是使用花括号作为代码块的标记),具有相同缩进的多行代码属于同一个代码块。如果代码莫名其妙的乱缩进,Py

    2022年7月5日
    24
  • nginx重启几种方法

    nginx重启几种方法

    2021年10月14日
    46

发表回复

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

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