input-text
生活随笔
收集整理的這篇文章主要介紹了
input-text
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求：不能輸入漢字，在input的type為text時，jQuery的val值是可以獲取到的，這時可以利用keyup事件，當獲取到的值為非數字時，直接將輸入框清空，這樣可以實現禁止輸入漢字之類的非法字符
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><meta name="format-detection" content="telephone=no"><script src="jquery-3.2.1.js"></script> </head> <body><input type="text" placeholder="自定義" class="user-define-money" id="define-money" /><button class="btn-test">test</button><script>$("#define-money").keyup(function(){$("input").css("background-color","pink");if(isNaN($('.user-define-money').val())){$('.user-define-money').val("");}});$(".btn-test").on('click',function(e){console.log($('.user-define-money').val())console.log($('.user-define-money')[0].value);var userValue =$('.user-define-money').val();if(userValue ==""){if($('.user-define-money')[0].validationMessage){alert("格式不正確");$('.user-define-money').val("");return ;}else{alert("不能為空");$('.user-define-money').val("");return ;}}if(/^\d+(\.)?$/.test(userValue)){userValue = userValue.split(".")[0];}if(/^0\d+?/.test(userValue)){alert("格式不正確");$('.user-define-money').val("");return ;}if(userValue==''||userValue==undefined){alert("不能為空");return;}else if(isNaN(userValue)||userValue==0){alert("格式不正確");$('.user-define-money').val("");return ;} else if(checkUserDefined(userValue)){money = userValue;}else{alert("格式不正確");$('.user-define-money').val("");return ;}})function checkUserDefined(value){if(!isNaN(value) && /^\d+(\.\d{1,2}|\.)?$/.test(value)){//這里的判斷是控制非數字和小數點最多兩位的if(value.indexOf(".")==-1 && value.length<9){//這里的判斷是輸入沒有小數點且長度最大為8,符合條件return true;}else if(value.indexOf(".")!==-1 && value.length<=9){//這里的判斷是輸入有小數點且長度最大為8,符合條件return true;}else{//剩下的就是不符合條件return false;}}else{//這里也是不符合條件return false;}}</script> </body> </html>?
轉載于:https://www.cnblogs.com/haimengqingyuan/p/8570334.html
總結
以上是生活随笔為你收集整理的input-text的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Appium Desktop介绍-xco
- 下一篇： linux --redis的部署 即主从