react 输入框回车事件切换

在web项目中，多个输入框时，按tab 键是能够进行下一个切换聚焦的，回车也能够加上监听事件，方便用户处理多个输入的事件。

js 处理input 监听事件

function changeEnter(inputs) {const init = () => {for (let i = 0; i < inputs.length; i++) {inputs[i].addEventListener('keydown', focus(i), false); // 每个input添加键盘监听}
}const focus = (i) => {return (event) => {const next = i + 1 < inputs.length ? i + 1 : 0; // 判断是否为最后一个输入框，是则返回第一个，否则继续下一个const eve = event ? event : window.event;if (eve.keyCode === 13) {if (inputs[next].tagName === 'INPUT' || inputs[next].tagName === 'SELECT') {inputs[next].focus();}}}
}const destory = () => {for (let i = 0; i < inputs.length; i++) {inputs[i].removeEventListener('keydown', focus(i), false); // 解除监听}
}init();return {destory() {destory(); // 用于销毁监听}
}}module.exports = changeEnter

react 中使用


componentDidMount() {const inputSelector = `.page-container input[class$="ant-input"], .page-container input[class$="ant-input-number-input"],.textarea_box input[class$="ant-input-lg"]`const changes = document.querySelectorAll(inputSelector); // let activeChanges = []changes.forEach((item) => {if (!item.disabled) { // 过滤disabled 属性的输入框activeChanges.push(item)}})// console.log('changes', changes);this.inputEnter = changeEnter(activeChanges);
}
componentWillUnmount() {this.inputEnter && this.inputEnter.destory();
}

其中input[class$="ant-input"] 取法是为了获取 ant-input 结尾的input输入框，

react 输入框回车事件切换相关推荐

input输入框回车事件响应
1.方法1 $('#applyCertNum').bind('keypress',function(event){ if(event.keyCode == 13) { alert('你输入的内容为1: ...
angularjs中按回车事件_浅谈angularjs中响应回车事件
下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hello World!":(黄色背景内容为响应回车事件涉及到的代码) angularjs-demo test va ...
VUE扫码枪中文输入法兼容自动回车事件(上)
背景最近产品想要在页面上加一个input输入框,想要手动输入,也想要扫码枪扫描输入,大家都知道扫码枪扫描后会自动出发input的回车enter事件的,我当初也是这么认为的,所以在input上就直接绑 ...
处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
html回车按键确认按钮,button默认enter事件(回车事件)。
这里我介绍一下,button按钮默认回车(enter)事件.如果大家可以用submit,就不用看以下代码,因为submit可以直接默认回车事件(enter). 在这里特此声明,代码是通过jquery完 ...
swing程序中如何响应鼠标回车事件？
swing程序中如何响应鼠标回车事件? 参考这里实现:http://topic.csdn.net/u/20090806/17/b49846f5-cd76-467e-9b7c-21fe41846095. ...
jquery 回车事件
为什么80%的码农都做不了架构师?>>> jquery 回车事件简单地记下jquery实现回车事件,代码如下: 全局: $(function(){ document.onke ...
jquery|javascript 回车事件
转载链接:http://www.cnblogs.com/wenbo/archive/2011/08/20/2147014.html 转载链接: http://www.2cto.com/kf/201 ...
AngularJs 相应回车事件
最近做项目,要用到AngularJs,之前也有用过一点点,但仅限于数据的绑定,这次项目要整个前端需要使用这个框架,可能是不熟悉的原因,感觉这代码搞起来非常的不便利,:现总结一个响应回车事件: < ...

react 输入框回车事件切换

react 输入框回车事件切换相关推荐

最新文章

热门文章

react 输入框 回车事件切换

react 输入框 回车事件切换相关推荐

最新文章

热门文章

react 输入框回车事件切换

react 输入框回车事件切换相关推荐