input输入框onkeydown事件:键入值监控

本文介绍了一种使用JavaScript实现的键盘输入校验方法,确保用户只能输入数字,包括数字键盘和小键盘的数字输入,同时允许使用删除键。通过简单的onkeydown事件监听,结合keyCode属性判断,有效限制了非数字字符的输入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

校验键盘输入的只能是数字

js方法:

function check(e){
    //获取键盘输入的keyCode         
   var keycode = (Number)(e.keyCode);         
    //键盘上方数字键        
    if(keycode >= 48 && keycode <= 57){            
    e.returnValue = true;         
   //小数字键盘         
   }else if(keycode >=96 && keycode <= 105){
    e.returnValue = true;         
   //删除键和delete         
   }else if(keycode == 8 || keycode == 46){
    e.returnValue = true;         
   //除此之外,其他的不允许输入         
   }else{             
    e.returnValue = false;         
   }    
 }

HTML 标签中调用js方法:

<input onkeydown="check(event)"/>
### 解决方案 对于火狐浏览器中 `el-input-number` 组件可以输入字母的问题,在其他主流浏览器可能不会遇到此情况,但在 Firefox 中确实存在该现象。为了防止用户在 `el-input-number` 输入框内输入非数字符,可以通过监听键盘事件并阻止非法键入来实现[^1]。 下面是一个基于 Vue.js 的解决方案: ```vue <template> <div> <!-- 使用自定义指令 v-onlyNumber --> <el-input-number v-model="num" v-onlyNumber></el-input-number> </div> </template> <script> export default { data() { return { num: null, }; }, directives: { onlyNumber: { bind(el) { function handleInput(event) { const keyCode = event.keyCode; // 判断按键是否为数字(48-57),小键盘数字(96-105), Backspace, Delete, ArrowLeft, ArrowRight if ( (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) || [8, 46, 37, 39].includes(keyCode) ) { return true; // 允许操作 } else { event.preventDefault(); // 阻止默认行为 } } el.onkeydown = handleInput; // 清除绑定的事件处理器 el._vOnlyNumberOldOninput = el.oninput; el.oninput = () => { let value = el.value.replace(/[^\d]/g, ''); el.value = value; if (typeof el._vOnlyNumberOldOninput === 'function') { el._vOnlyNumberOldOninput(); } }; }, }, }, }; </script> ``` 通过上述方法可以在不改变原有逻辑的情况下有效拦截非数字字符的录入,并确保即使用户尝试粘贴或拖拽文本到输入框时也能保持数据的有效性[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值