原生input和onchange

张率功发布于2019-08-20 19:03 / 1154人阅读

摘要：简单是中输入值可以输多个，类似还是觉得让用户选，比用户输合适不过没办法，开始做。是的专属属性，以下不支持。直接使用就行代码填充内容参考文章总结与事件的用法和区别

简单是：input中输入id值(可以输多个，类似12,13,14)

ps: 还是觉得让用户选，比用户输合适

不过没办法，开始做。先认识一下原生的onchange，其实际意义并不是输入改变就会监听到，而是onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效

ps: react中的onchange很幸福

那使用onkeydwon，onkeyup怎么样？onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善

那么解决方式是：onpropertychange or oninput

onpropertychange是ie专属，可满足实时修改的需求。
oninput是html5的专属属性，ie9以下不支持。

ps: 直接使用oninput就行

代码：

参考文章：
总结oninput、onchange与onpropertychange事件的用法和区别

云服务器 GPU云服务器 BUTTON和INPUT的区别原生js和jquery onchange onchange事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85077.html

从 0 到 1 实现 react - onChange 事件以及受控组件

摘要：比如它目前事件其实对应着原生事件中的事件。在这个中明确了未来会使用事件替代事件，并且会大幅度地简化合成事件。效果如下至此，模拟了受控组件的实现。该系列文章在实现 cpreact 的同时理顺 React 框架的核心内容项目地址从一个疑问点开始接上一章 HOC 探索抛出的问题 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表现不一致...

dongxiawu 2019-08-23 12:02 评论0 收藏0
React16事件机制彻底解读

摘要：二阻止事件冒泡，没办法阻止原生事件冒泡。从事件的三个阶段讲起，会略微提及下的事件机制。就是说注册某个事件，会强制依赖其他事件。因为所有事件都是绑定在上的。划重点事件合成的过程。派发的过程实际上就是遍历事件队列的过程。 react.js事件机制写这篇文章的缘由：一：在给input绑定事件的时候，很好奇为何onChange的交互形式竟然和onInput一模一样。因为原生的change...

sugarmo 2019-08-26 11:57 评论0 收藏0
结合源码彻底理解 react事件机制原理 02 - 对于合成的理解

摘要：前言这是事件机制系列文章的第二篇对于合成的理解，咱们就来说说合成这个名词。在给注册事件的时候也是对兼容性做了处理。总结以上就是我对于合成这个名词的理解，其实内部还处理了很多，我只是略微简单的举了几个栗子。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言这是react事件机制系列文章的第二篇-对于合成的理解，...

nihao 2019-08-23 17:57 评论0 收藏0
React中的表单组件

摘要：对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。约束性和非约束性组件表单里面出来了一个新的概念叫约束性组件。这样写出的来的组件，其值就是用户输入的内容，完全不管理输入的过程。约束性组件显示的是的值。表单是前端非常重要的一块内容，并且往往包含了错误校验等逻辑。 React对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更...

canopus4u 2019-08-20 15:19 评论0 收藏0