js key Event 只允许输入数字处理

最新推荐文章于 2020-12-23 03:05:40 发布

原创最新推荐文章于 2020-12-23 03:05:40 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何通过JavaScript实现文本框输入限制：仅允许输入数字，禁止使用快捷键、粘贴操作，并在输入完毕后处理输入值。

<input id="target" style="ime-mode:disabled;" onpaste="return false" type="text"/>// style="ime-mode:disabled;" 禁止输入法 onpaste="return false"禁止黏贴

//只允许输入数字

$("#target").keydown(function(e){

});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wccmfc123

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

javascript限制文本框只允许输入数字(曾经与现在的方法对比)

12-12

曾经使用过的方法通过onkeydown事件来控制只允许数字：代码如下: <input onkeydown=”return event.keyCode>=48&&event.keyCode<=57||event.keyCode>=96&&event.keyCode<=105″ /> 通过jQuery插件...

文本框只能输入数字的实现方法(兼容IE火狐)

09-02

在网页开发中，有时我们需要限制用户在输入框（`<input>`）中只能输入数字，以确保数据的准确性和一致性。本文将详细讲解如何通过JavaScript实现这个功能，并且重点介绍如何使其兼容Internet Explorer (IE) 和 ...

参与评论您还未登录，请先登录后发表或查看评论

js 只允许输入数字

xinsiyu2008的专栏

02-15

2923

原文章在：http://www.cnblogs.com/ly5201314/archive/2009/03/04/1402993.html 写得很不错，实用，可以自己修改一下扩展相关功能：为了解决只能输入数字的问题，网上有许多资料，现归拢一下。一、不带负号的输入这里，没有解决“正负号”的问题。由于“正负号”必须出现在数字的最前端，因此，必须要判断当前光标所在的位置是否

js 只能输入数字，其他无法输入

趙大叔

03-05

897

代码如下： $("#displayorder").keydown(function(event) { var k = event.keyCode; if ((k = 48) || (k = 96) || (k == 8)) { return true; } else { return false; } });

js控制只允许输入数字

ljmkmnkl的博客

06-14

377

avascript 只允许输入数字有很多方法，总结如下 1，只允许输入数字和小数点。 input onKeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled">

Javascript keyevent

XF的专栏

03-07

3187

键盘上的键分为字符键和功能键两种，也称为可打印键和不可打印键。功能键包括Esc、F1~F12、Tab、Caps Lock、Shift、Ctrl、Insert、Home、Page Up、Page Down、Delete、End、Up、Down、Left、Right、Enter等键盘事件的触发顺序为：keydown - keypress - keyup。 keydown和keyup是

基于js实现的限制文本框只可以输入数字

10-20

标题中提到的知识点是利用JavaScript（简称js）技术来限制用户在网页上的文本框中只能输入数字。这种功能在许多应用场景中都非常有用，比如在填写身份证号码、电话号码、金额等字段时，我们希望用户输入的数据符合...

3种Jquery限制文本框只能输入数字字母的方法

12-09

// 限制只能输入数字 // // ———————————————————————- $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj = event || e; var keyCode = eventObj.keyC

keyevent 封装_adb shell input keyevent 控制按键输入的数值(收藏版)

weixin_35343148的博客

12-23

333

adb shell的功能很强大，可以使用很多功能，今天我们说下通过控制按键输入：adb shell input keyevent xx ，具体数值xx如下KEYCODE_CALL 进入拨号盘 5KEYCODE_ENDCALL 挂机键 6KEYCODE_HOME 按键Home 3KEYCODE_MENU 菜单键 82KEYCODE_BACK 返回键 4KEYCODE_SEARCH 搜索键 84KEY...

JS 输入框只能输入数字

分享我的点点滴滴，在成长路上与你同行！

10-03

535

说明：onkeyup=按键抬起触发， onafterpaste=粘贴之后触发 onkeypress =按下并放开任何字母数字键时触发 onbeforepaste=粘贴之前触发 onkeydown 按下任何键盘键（包括系统按钮，如箭头键和功

javascript事件key，mouse中的区别（个人理解+参考w3school）

tu451953337的专栏

07-17

2322

key的区别 1. keypress, 只要按下有ASCII值的键才触发。如按下ctrl键不会触发事件，但按下字母键或数字键都可以触发。也可以浅显的理解为能直接在文本框里打出东西的键才能触发该事件。值得注意的是打中文不会触发该事件。通过event.keyCode，按下a和A得到就是对应的ASCII值。 2. keydown, 和keypress相似但不同，相似的按下键盘触发事件，不

JS限制只允许数字输入

Java技术

11-15

4758

示例代码<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script src="/js/jquery-3.1.0.min.js"></script> </head> <

JS_控制输入，只能键入数字

Small Fish

04-08

6034

技术要领：onkeydown事件先于onkeyup事件被触发；当onkeydown事件return false时onkeyup事件将不会被触发，并且输入框中也不会有用户刚按下的这个字符，从而实现了屏蔽某些字符的目的。了解了这一事件触发原理，思想上应当有所延伸(比如鼠标的几个事件也会是这样的机制)..... onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能

JS只能输入数字，数字和字母等的正则表达式

weixin_34358365的博客

04-10

789

2011-12-07 11:44 JS判断只能是数字和小数点 0.不能输入中文1）<input onpaste="return false;" type="text" name="textfield" style="width:400px; ime-mode:disabled" value="">2）<script>function chkIt(

js控制只能输入数字和小数点

weixin_34377919的博客

03-24

398

非常好用，代码示例如下： <input onkeypress = "return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46" onpaste = "return !clipboardData.getData('text').match(/\D/)" ondragenter = "...

js控制文本框输入的内容为（数字、字母、汉字）（一、js在控件中实现）

张家小丫头的博客

10-22

1650

原文转载自脚本之家 http://www.jb51.net/article/51102.htm 这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例，学习下js控制文本框中输入数字的方法,需要的朋友可以参考下有时需要限制文本框输入内容的类型，本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码。例如，输入大于0的正整数 1，文本框只能输入数

Jquery控制只能输入数字的常见方法

最新发布

09-10

<think> 我们需要在Element UI的el-input组件中限制只能输入数字。这可以通过多种方式实现，包括使用原生HTML5属性、自定义验证或事件处理。常见方法： 1. 使用 `type="number"` 属性：但注意，这仍然允许输入科学计数法字符（e, E）以及加减号，且样式上会有上下箭头。 2. 使用 `oninput` 事件和正则表达式：通过输入时过滤非数字字符。 3. 结合Element UI的表单验证规则（如果用在表单中）。然而，Element UI的el-input组件使用type="number"时，在移动端可能会弹出数字键盘，但在桌面端会有上下箭头，且允许输入非数字字符（如e, E, +, -）但提交时会验证。但有时候我们需要完全禁止非数字字符输入。因此，我们可以使用第二种方法：在输入时通过事件处理过滤非数字字符。注意：我们可能还需要考虑小数点（如果需要小数的话）和负号（如果需要负数的话）。这里根据需求，如果只允许正整数，则只允许数字；如果允许小数和负数，则规则不同。假设需求是只允许正整数（即不允许小数点和负号），我们可以这样实现： ```vue <template> <el-input v-model="inputValue" @input="handleInput" placeholder="请输入数字"></el-input> </template> <script> export default { data() { return { inputValue: '' } }, methods: { handleInput(value) { // 使用正则表达式替换非数字字符 this.inputValue = value.replace(/[^\d]/g, ''); } } } </script> ``` 如果需要允许小数（比如浮点数），则可以修改正则表达式： - 允许小数点：但注意小数点只能出现一次，且不能在开头。 - 但直接替换非数字和小数点的字符，然后可以再对多余的小数点进行处理。但为了简单，我们可以先过滤掉非数字和小数点的字符，然后处理多个小数点的情况： ```javascript handleInput(value) { // 先替换掉非数字和小数点的字符 let newValue = value.replace(/[^\d.]/g, ''); // 处理多个小数点：只保留第一个小数点，后面的去掉 const dotIndex = newValue.indexOf('.'); if (dotIndex !== -1) { // 如果已经有小数点了，那么后面的小数点都去掉 newValue = newValue.substring(0, dotIndex + 1) + newValue.substring(dotIndex + 1).replace(/\./g, ''); } // 如果小数点出现在开头，我们可以在前面补0，或者不允许？根据需求，这里我们不允许开头就是小数点，所以去掉开头的小数点 if (newValue.startsWith('.')) { newValue = ''; } this.inputValue = newValue; } ``` 如果需要允许负数，则还需要考虑负号的位置（只能出现在开头且只能有一个）。然而，以上方法在输入过程中可能不符合预期（比如用户想输入小数，但中间过程可能被截断），而且直接修改value可能会导致光标位置错乱。更高级的处理：使用自定义指令或者使用计算属性，但在事件处理中修改值会导致光标跳动问题。解决光标位置问题的一种方法是保存光标位置，然后设置值后恢复光标位置。但这样代码会复杂一些。另一种方法是使用Element UI的表单验证，在提交时验证，但这样在输入过程中不禁止非数字字符。根据需求，如果我们希望即时过滤，可以采用上述方法，并注意光标位置问题。但这里我们先不考虑光标位置，因为要求不高的情况下可以使用。如果需求是整数，那么最简单，直接替换非数字字符即可。下面提供一个整数限制的示例代码（不会出现光标跳动问题，因为替换后整个字符串的变化是连续的，但光标会跳到末尾，如果中间插入就不行，所以如果需要中间插入，则需要处理光标位置）。如果需要精确控制光标位置，可以使用以下方法：在事件处理函数中，我们除了修改value，还要记录和恢复光标位置。这里提供一个整数输入且处理光标的例子： ```vue <template> <el-input ref="input" v-model="inputValue" @input="handleInput" placeholder="请输入正整数"></el-input> </template> <script> export default { data() { return { inputValue: '' } }, methods: { handleInput(value) { // 记录当前光标位置 let pos = this.$refs.input.$el.querySelector('input').selectionStart; // 过滤非数字 let newValue = value.replace(/[^\d]/g, ''); // 更新值 this.inputValue = newValue; // 等待DOM更新后设置光标位置 this.$nextTick(() => { // 因为过滤了非数字，所以光标位置可能需要调整 // 例如，如果我们在中间删除了一个非数字字符，那么删除后光标位置应该不变，但过滤后会导致后面的字符前移，所以光标位置需要前移（实际上这里我们无法精确知道删除了几个字符，所以简单处理：将光标放在新字符串的同样位置，但如果新字符串长度缩短，则光标位置不能超过新字符串长度） let inputEl = this.$refs.input.$el.querySelector('input'); inputEl.selectionStart = Math.min(pos, newValue.length); inputEl.selectionEnd = Math.min(pos, newValue.length); }); } } } </script> ``` 但是，由于我们的过滤是全局替换，所以光标位置的处理比较复杂，上述代码只是简单将光标放在尽可能接近的位置。考虑到复杂性，如果需求不严格，可以直接让光标跳到末尾（不处理光标位置，或者直接设置到末尾）。因此，根据实际需求选择方案。总结：对于只允许输入整数的情况，使用过滤非数字字符并更新值，如果要求光标位置正确，则需额外处理。另外，Element UI提供了自定义表单验证规则，可以在提交时验证，但无法阻止输入。所以，我们根据用户的问题，假设用户只需要正整数，且不需要处理光标位置（或者允许光标跳到末尾），那么最简单的方法就是： ```vue <el-input v-model="inputValue" @input="inputValue = $event.replace(/[^\d]/g, '')"></el-input> ``` 但注意：如果inputValue是数字类型，那么绑定到v-model时可能会出现空字符串转换为0的情况，所以建议inputValue使用字符串类型。如果要求必须是数字类型，可以在输入过程中使用字符串，然后在提交时转换为数字。下面给出一个完整的正整数输入组件示例（使用字符串类型）： ```vue <template> <el-input v-model="inputStr" @input="handleInput"></el-input> </template> <script> export default { data() { return { inputStr: '' } }, methods: { handleInput(value) { this.inputStr = value.replace(/[^\d]/g, ''); } } } </script> ``` 如果要求输入负整数或小数，则需要调整正则表达式和过滤规则。根据用户问题“只允许输入数字”，我们默认是整数，所以采用正整数方案。如果需要小数，则需要额外考虑。最后，根据用户要求，在回答后提出相关问题。注意：用户要求用中文回答，且最后必须输出§§相关问题§§。 </think> ### 在 Element UI 中实现 `el-input` 只允许输入数字的解决方案 #### 完整实现方案（Vue 3 + Element Plus） ```vue <template> <el-input v-model="numberInput" placeholder="请输入数字" @input="validateNumberInput" @keydown="preventNonNumericInput" /> </template> <script setup> import { ref } from 'vue'; const numberInput = ref(''); // 方法1：使用输入事件校验 const validateNumberInput = (value) => { // 移除非数字字符（保留小数点和小数点后的数字） numberInput.value = value.replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1'); }; // 方法2：阻止非数字键输入 const preventNonNumericInput = (event) => { // 允许：数字键、小数点、退格、删除、方向键 const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; if ( !/[0-9]/.test(event.key) && !allowedKeys.includes(event.key) && event.key !== '.' ) { event.preventDefault(); } }; </script> ``` #### 关键功能说明 1. **双重验证机制** - `@input` 事件：过滤已输入的非数字字符 - `@keydown` 事件：阻止非数字键的输入 2. **正则表达式过滤逻辑** - `[^\d.]`：移除非数字和小数点字符 - `(\..*)\.`：防止输入多个小数点 3. **允许的特殊按键** ```javascript ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'] ``` 4. **支持特性** - ✅ 允许整数和小数（如 `123.45`） - ✅ 支持退格删除操作 - ✅ 兼容键盘方向键导航 - ❌ 禁止输入字母、符号等非数字内容 #### 进阶方案：封装为可复用指令 ```javascript // number-only-directive.js export const numberOnlyDirective = { mounted(el) { el.addEventListener('input', (e) => { e.target.value = e.target.value .replace(/[^\d.]/g, '') .replace(/(\..*)\./g, '$1'); }); el.addEventListener('keydown', (e) => { const allowedKeys = ['Backspace','Delete','ArrowLeft','ArrowRight','ArrowUp','ArrowDown']; if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key) && e.key !== '.') { e.preventDefault(); } }); } }; // 在组件中使用 import { numberOnlyDirective } from './directives/number-only-directive'; <el-input v-number-only v-model="numberInput" /> ``` #### 浏览器兼容性处理 1. **移动端适配** ```html <el-input type="tel" inputmode="numeric" /> ``` - `type="tel"` 在移动端唤起数字键盘 - `inputmode="numeric"` 指定输入模式 2. **IE兼容方案** ```javascript // 添加老旧浏览器兼容 if (!Array.prototype.includes) { Array.prototype.includes = function(item) { return this.indexOf(item) !== -1; }; } ```