快捷導(dǎo)航

JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字

更新時(shí)間：2022年06月02日 08:46:42 作者：黃鋼

本文主要介紹了JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

今日在看JavaScript的時(shí)候，發(fā)現(xiàn)鍵盤(pán)響應(yīng)時(shí)間onkeydown和一些其他的相關(guān)事件都停用了keyCode這個(gè)屬性，而keyCode這個(gè)屬性返回的是鍵盤(pán)按鍵的ASCII碼值，停用后有個(gè)code屬性替代，但也不完全替代，因?yàn)閏ode屬性返回的是鍵值本身的值，所以寫(xiě)法也不一樣，下面用正則表達(dá)式來(lái)禁止輸入框輸入數(shù)字，直接上代碼

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>1609</title>
? ? <script>
? ? ? ? window.onload = function(){
? ? ? ? ? ? var inp = document.getElementsByTagName("input")[0];
? ? ? ? ? ? inp.onkeydown = function(e){
? ? ? ? ? ? ? ? if(/\d/.test(e.code)){

? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? console.log(e.code);
? ? ? ? ? ? };
? ? ? ? };
? ? </script>
</head>
<body>
<input type="text" id="1" />
</body>
</html>

JavaScript中正則表達(dá)式的test()方法返回一個(gè)bool值，就是文本是否匹配表達(dá)式

而使用keyCode寫(xiě)法如下

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>1609</title>
? ? <script>
? ? ? ? window.onload = function(){
? ? ? ? ? ? var inp = document.getElementsByTagName("input")[0];
? ? ? ? ? ? inp.onkeydown = function(e){
? ? ? ? ? ? ? ? if(e.keyCode >= 48 && e.keyCode <= 57)){

? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? console.log(e.code);
? ? ? ? ? ? };
? ? ? ? };
? ? </script>
</head>
<body>
<input type="text" id="1" />
</body>
</html>

到此這篇關(guān)于JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字的文章就介紹到這了,更多相關(guān)JavaScript禁止鍵盤(pán)輸入數(shù)字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

支付寶小程序自定義彈窗dialog插件的實(shí)現(xiàn)代碼
支付寶小程序官方提供的alert提示框、dialog對(duì)話框、model彈窗功能比較有限，有些都不能隨意自定義修改的。這篇文章主要介紹了支付寶小程序自定義彈窗dialog插件的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-11-11
JavaScript頁(yè)面模板庫(kù)handlebars的簡(jiǎn)單用法
本文主要是給大家分享的一個(gè)javascript頁(yè)面模板庫(kù)Handlebars的簡(jiǎn)單用法，可以幫助大家輕松的構(gòu)建語(yǔ)義化模板，非常的實(shí)用，推薦給大家。
2015-03-03
JS實(shí)現(xiàn)單例模式的N種方案
JS實(shí)現(xiàn)單例模式的多種方案，本文稍加總結(jié)，列出了6種方式與大家分享，大體上將內(nèi)容分為了ES5（Function）與ES6（Class）實(shí)現(xiàn)兩種部分，對(duì)js單例模式相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2022-09-09
分享一則javascript 調(diào)試技巧
這篇文章主要分享了一則javascript 調(diào)試技巧,需要的朋友可以參考下
2015-01-01
重學(xué)JS之顯示強(qiáng)制類型轉(zhuǎn)換詳解
這篇文章主要給大家介紹了關(guān)于重學(xué)JS之顯示強(qiáng)制類型轉(zhuǎn)換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
js右下角彈出提示框示例代碼
這篇文章主要介紹了js右下角彈出提示框示例代碼，即網(wǎng)頁(yè)右下角彈出廣告信息框?qū)嵗a，感興趣的小伙伴們可以參考一下
2016-01-01
Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)實(shí)例代碼
最近項(xiàng)目用到了Echarts圖進(jìn)行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關(guān)于Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
canvas實(shí)現(xiàn)鐘表效果
本文主要分享了canvas實(shí)現(xiàn)鐘表效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果,結(jié)合完整實(shí)例形式分析了js多級(jí)聯(lián)動(dòng)菜單的完整實(shí)現(xiàn)步驟,涉及JS數(shù)組遍歷、擴(kuò)展及元素節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下
2017-02-02
JavaScript 實(shí)現(xiàn)HTML DOM增刪改查操作的常見(jiàn)方法詳解
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)HTML DOM增刪改查操作,結(jié)合實(shí)例形式分析了JavaScript針對(duì)HTML DOM元素增刪改查常見(jiàn)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下
2020-01-01