javascript限制文本框輸入值類型的方法

更新時(shí)間：2015年05月07日 09:12:18 投稿：shichen2014

這篇文章主要介紹了javascript限制文本框輸入值類型的方法,涉及javascript鼠標(biāo)事件、鍵盤按鍵及字符串的相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript限制文本框輸入值類型的方法。分享給大家供大家參考。具體分析如下：

要求：所有的文本框，只能輸入數(shù)字和小數(shù)點(diǎn)，其他的符號(hào)一概不能輸入；

重點(diǎn)是我希望在用戶輸入時(shí)就做限制，而不是提交時(shí)判斷——也就是說(shuō)如果用戶在文本框內(nèi)輸入數(shù)字或小數(shù)點(diǎn)，可以正常輸入；如果輸入字母等非數(shù)字字符，則文本框會(huì)沒(méi)有任何反應(yīng)，不會(huì)顯示輸入的字符。

<html>
<body>
<script>
var s = "<input type=\"text\" size=\"20\" " +
"style=\"text-align:center\" " +
"onkeydown=\"if(event.keyCode>57&&event.keyCode!=190) return false\" "+ 
//限制只能輸入數(shù)字
"onblur=\"value=value.replace(/[^0-9\.]/g,'')\" " + 
//限制鼠標(biāo)點(diǎn)擊輸入非數(shù)字
"onbeforepaste=\"clipboardData.setData(\"text\"," + 
//限制只能粘貼數(shù)字
"clipboardData.getData(\"text\").replace(/[^0-9\.]/g,''))\">";
document.write(s);
</script>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)下拉菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02
詳解webpack中的publicpath
這篇文章主要介紹了webpack中的publicpath,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
詳細(xì)聊聊TypeScript中any unknown never和void的區(qū)別
這篇文章主要給大家聊聊TypeScript 中 any、unknown、never 和 void 有什么區(qū)別，文中有詳細(xì)的代碼實(shí)例講解，具有一定的參考價(jià)值,需要的朋友可以參考下
2023-07-07
微信禁止下拉查看URL的處理方法
這篇文章主要介紹了微信禁止下拉查看URL的處理方法,需要的朋友可以參考下
2017-09-09
javascript 瀏覽器檢測(cè)代碼精簡(jiǎn)版
javascript檢測(cè)瀏覽器精簡(jiǎn)版，需要的朋友可以參考下。
2010-03-03
如何獲取select下拉框的值(option沒(méi)有及有value屬性)
獲取select下拉框的值分為option沒(méi)有value屬性及有value屬性時(shí)的兩種情況，下面分別給出具體的實(shí)現(xiàn)代碼，需要的朋友可以參考下
2013-11-11
js返回上一頁(yè)并刷新代碼整理
返回上一頁(yè)并刷新在此功能有利于用戶的體驗(yàn),是每一個(gè)web開(kāi)發(fā)人員所必備的一項(xiàng)，長(zhǎng)話短說(shuō)，今天介紹實(shí)現(xiàn)此功能的一個(gè)方法，需要了解的朋友可以參考下
2012-12-12
JavaScript實(shí)現(xiàn)DIV層拖動(dòng)及動(dòng)態(tài)增加新層的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)DIV層拖動(dòng)及動(dòng)態(tài)增加新層的方法,設(shè)計(jì)javascript操作div層的拖動(dòng)與增加的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
uniapp web-view組件雙向通信的問(wèn)題記錄
本文主要介紹在uniapp中頁(yè)面與webview組件內(nèi)頁(yè)面的雙向通信問(wèn)題,本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
深入JS繼承
這篇文章主要介紹了深入JS繼承，對(duì)繼承感興趣的同學(xué)，可以參考下
2021-05-05