当前位置: 首页 > article >正文

动态表单开发避坑:改变input的值不会触发change事件即时修复策略-WdatePicker ——仙盟创梦IDE

 原始传统模式 onchange

 

<input  onchange="未来之窗东方仙盟change(this)" oni >
<script>function 未来之窗东方仙盟change(onj){console.log("未来之窗东方仙盟change",onj.value)}
</script>

测试

  原始传统模式 oninput 

<input  onchange="未来之窗东方仙盟change(this)" oninput="未来之窗东方仙盟输入(this)" >
<script>function 未来之窗东方仙盟change(onj){console.log("未来之窗东方仙盟change",onj.value)}function 未来之窗东方仙盟输入(onj){console.log("未来之窗东方仙盟change",onj.value)}
</script>

 

 

  原始传统模式onblur

新模式js 触发

<input id="仙盟开房日期" onchange="未来之窗东方仙盟change(this)" oninput="未来之窗东方仙盟输入(this)" >
<script>function 未来之窗东方仙盟change(onj){console.log("未来之窗东方仙盟change",onj.value)}function 未来之窗东方仙盟输入(onj){console.log("未来之窗东方仙盟输入",onj.value)}let 仙盟开房日期 = document.querySelector('仙盟开房日期')仙盟开房日期.onchange = function () {console.log('输入框内容发生改变');};</script>

 被动触发onchang

在你操作完后手动触发

jq操作方式

 

  $(document).ready(function () {$('#仙盟开房日期').on('change', function () {console.log('change事件被触发');});// 改变input的值$('#仙盟开房日期').val('新的值');// 触发change事件$('#仙盟开房日期').trigger('change');});

其他空间WdatePicker 之onpicked

WdatePicker 是一款基于 JavaScript 开发的轻量级日期选择插件,常用于网页开发中为用户提供方便的日期选择功能。以下为你详细介绍:

特点

  1. 兼容性好:能兼容多种主流浏览器,如 IE、Firefox、Chrome、Safari 等,确保在不同浏览器环境下都能正常使用,为广大用户提供一致的日期选择体验。
  2. 轻量级:代码简洁,文件体积较小,不会给网页加载带来过多负担,能有效提升页面性能,即使在网络环境较差或页面已有众多元素的情况下,也能快速加载并呈现日期选择功能。
  3. 自定义性强:提供丰富的配置参数,允许开发者根据项目需求灵活定制日期选择器的外观、行为等。例如,可以自定义日期格式、语言、起始日期、结束日期、禁用日期范围等,满足各种不同场景下的日期选择需求。
  4. 用户体验友好:具有直观的界面设计,用户可以通过点击日历图标弹出日期选择面板,以可视化方式轻松选择日期。支持键盘操作,方便习惯使用键盘的用户进行快速选择,同时还提供诸如年 / 月切换、快捷选择本月、今日等常用功能,提升用户选择日期的效率。

 

阿雪技术观

让我们积极投身于技术共享的浪潮中,不仅仅是作为受益者,更要成为贡献者。无论是分享自己的代码、撰写技术博客,还是参与开源项目的维护和改进,每一个小小的举动都可能成为推动技术进步的巨大力量

Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progress.

http://www.lryc.cn/news/2394275.html

相关文章:

  • 10.安卓逆向2-frida hook技术-frida基本使用-frida指令(用于hook)
  • 动态设置微信小程序页面标题(navigationBarTitleText属性)
  • 前端流式接收数据讲解
  • Flutter下的一点实践
  • Python训练营打卡 Day41
  • Eclipse集成lombok
  • 什么是trace,分布式链路追踪(Distributed Tracing)
  • VScode ios 模拟器安装cocoapods
  • Redis最佳实践——安全与稳定性保障之数据持久化详解
  • 互联网大厂Java求职面试实战:Spring Boot微服务架构及Kafka消息处理示例解析
  • K 值选对,准确率翻倍:KNN 算法调参的黄金法则
  • 技术栈ES的介绍和使用
  • 跟Gemini学做PPT-模板样式的下载
  • Windows版本的postgres安装插件http
  • uni-app学习笔记十六-vue3页面生命周期(三)
  • 优化的两极:凸优化与非凸优化的理论、应用与挑战
  • (五)MMA(OpenTelemetry/Rabbit MQ/ApiGateway/MongoDB)
  • TCP通信与MQTT协议的关系
  • AWS创建github相关的角色
  • 数据编辑器所具备的数据整理功能​
  • Unity网络开发实践项目
  • Jetson Orin Nano - SONY imx415 camera驱动开发
  • word为跨页表格新加表头和表名
  • 测试用例篇章
  • 2025年北京市职工职业技能大赛第六届信息通信行业网络安全技能大赛复赛CTF部分WP-哥斯拉流量分析
  • Django ToDoWeb 服务
  • 【软件】在 macOS 上安装 Postman
  • 各种数据库,行式、列式、文档型、KV、时序、向量、图究竟怎么选?
  • 全志科技携飞凌嵌入式T527核心板亮相OpenHarmony开发者大会
  • AI+微信小程序:智能客服、个性化推荐等场景的落地实践