`
bosschen
  • 浏览: 197268 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

form表单里输入框即时监听输入信息

 
阅读更多

传统对于文本框(input)的输入可通过键盘的 onkeydown / onkeypress / onkeyup 来监测,但在处理较多细节时存在诟病比如: cut(剪切) / paste(复制) / undo(撤销) / redo(重做) / drag & drop(拖拽)/ 输入法等。

onchange 必须得鼠标离开才触发,类似与onblur,也不是我们想要的。

而 oninput & onpropertychange 事件基本可以解决上面的诟病:

区别在于onpropertychange 只支持IE浏览器。

oninput 支持IE外的其它浏览器。

我们用 if(window.attachEvent){

}else{

}

来判断即可。

 

分享到:
评论

相关推荐

    微信小程序例子——使用form表单获取输入框数据

    在这个例子中,我们将深入探讨如何在微信小程序中使用`form`表单来获取用户输入的数据。 一、`<form>`组件介绍 在微信小程序中,`<form>`组件用于创建一个表单容器,它允许用户输入数据并通过提交操作将数据传递到...

    js注册表单错误输入框红色圆角提示效果

    在这个案例中,当用户在注册表单中输入错误信息时,JavaScript会检测到这些错误,并对相应输入框进行高亮显示,通常以红色边框或背景色来突出。 描述中提到的"圆形渐隐渐现效果"可能是指在火狐浏览器中,当错误出现...

    form表单日期输入控件

    在网页设计和开发中,`form` 表单是用户与服务器进行数据交互的重要组成部分,而日期输入控件则是表单中常见的一种元素,用于收集用户的日期或时间信息。在HTML5中,引入了内置的日期输入类型,使得创建和处理日期...

    jQuery/JS监听input输入框值变化实例

    在本文中,我们将探讨如何使用jQuery和JavaScript来监听HTML input元素的值变化事件。文章首先介绍了input元素值变化的不同监听方法,并...这使得文章成为了一个很好的资源,供前端开发人员在处理表单输入监听时参考。

    微信小程序使用form表单获取输入框数据的实例代码

    总结来说,本实例展示了微信小程序中如何使用form表单和input组件收集用户输入,以及如何通过事件监听和数据绑定机制来处理这些输入数据。了解这些基本概念和技巧对于构建交互式的微信小程序至关重要。在实际开发中...

    form表单中的onblur事件

    在网页开发中,表单(Form)是用户与页面交互的重要元素,用于收集用户输入的信息。在HTML中,我们可以利用各种事件来控制表单元素的行为,`onblur`事件就是其中之一。`onblur`事件是当用户焦点离开某个元素,比如...

    【JavaScript源代码】react+antd.3x实现ip输入框.docx

    - `handleNumberChange`方法监听输入框的`onChange`事件,确保输入的数值合法并更新状态。 - `turnIpPOS`方法处理键盘事件,如左右箭头、回车键、空格键和冒号,以实现光标在输入框间的移动。根据按键码判断光标的...

    原生js form表单美化插件表单元素input select下拉框

    本主题将深入探讨如何使用原生JavaScript对form表单进行美化,并对input输入框和select下拉框进行优化。 一、表单基础 1. 表单元素:HTML中的<form>标签定义了一个表单,其中可以包含各种表单控件,如(输入框)、...

    H5 输入框的提示信息

    如上例所示,`placeholder="请输入您的姓名"`会在输入框内显示“请输入您的姓名”,当用户开始输入或者聚焦在输入框时,该提示信息会自动消失。 2. CSS样式调整 有时我们可能需要自定义提示信息的样式,可以通过CSS...

    form表单美化插件

    为了提升用户体验和网站美观度,"form表单美化插件"应运而生。这个插件专门针对这一问题,旨在通过简单的方式将普通的HTML表单元素转化为更为现代、优雅的样式。 该插件基于jQuery库,这意味着它能够无缝集成到使用...

    form表单验证技巧

    ### Form表单验证技巧 #### 一、背景介绍 在Web开发中,表单验证是一项非常重要的任务。它能够确保用户提交的数据符合预期格式,从而提高数据处理的准确性和安全性。其中,对于数字和字母的验证尤其常见。本文将...

    一个增加表单input的例子/表单框按需求点击增加

    本示例聚焦于一个动态增加表单输入的解决方案,允许用户根据需求自由添加新的姓名输入框,以适应不同数量的报名者。 首先,我们来探讨表单的基本构成。在HTML中,`<form>`元素用于定义一个表单,它可以包含各种输入...

    form表单日期输入时间控件2

    在网页开发中,`form`表单是收集用户数据的核心元素,而日期和时间输入控件则是表单中常见且重要的组成部分。它们允许用户方便地输入或选择日期和时间值,提高了用户体验并确保数据的准确性。本文将深入探讨HTML、...

    基于elementui的form表单实现的一个高拓展性的表格布局组件

    本文将深入探讨如何利用Element UI的Form表单组件构建一个高拓展性的表格布局组件。 首先,Element UI的Form组件提供了强大的表单处理能力,它支持各种表单元素如Input、Select、Checkbox、Radio等,并且具有表单...

    表单验证、输入框控制

    例如,它可能通过获取表单元素,监听`submit`事件,然后在提交前检查每个输入字段的值,如果不符合要求,则阻止表单提交并显示错误信息。 为了确保表单验证的有效性,开发者需要注意以下几点: - 不要完全依赖...

    angular的表单设计器 angular-form-builder

    4. **UI Components**: Angular-Form-Builder提供了丰富的UI组件,如输入框、下拉列表、日期选择器等,可以直接在表单中使用。 **二、使用Angular-Form-Builder的步骤** 1. **安装**: 首先,你需要在项目中安装...

    form表单验证.rar

    "form表单验证.rar" 提供的是一组使用JavaScript实现的经典表单验证特效动画,可以帮助开发者学习和理解如何优雅地处理用户输入的验证过程。下面我们将详细探讨JavaScript、前端开发、HTML和CSS在表单验证中的应用。...

    基于jQuery和layui的form表单自定义js动态生成

    6. 提交事件处理:监听表单的submit事件,进行数据的收集和处理。 ```javascript $('form').on('submit', function(e) { e.preventDefault(); var data = $(this).serializeArray(); console.log(data); // 打印...

    layui实现车牌号输入框

    可能需要监听输入框的事件,比如在用户输入时即时验证车牌号的合法性。layui的form模块提供on方法,可以监听表单元素的事件。 ```javascript form.on('input(carNumber)', function(data){ var value = data....

    jQuery表单输入框浮动标签文字代码.zip

    1. 初始化页面,绑定事件监听器到表单输入框。 2. 当输入框获得焦点时,改变标签的样式,使其浮动到输入框上方,并可能改变其内容为提示文字。 3. 当输入框失去焦点且无有效输入时,恢复标签的原始样式和位置,显示...

Global site tag (gtag.js) - Google Analytics