input-text

時間 2019-12-08

標籤 input text 欄目 HTML 简体版

原文原文鏈接

需求：不能輸入漢字，在input的type爲text時，jQuery的val值是能夠獲取到的，這時能夠利用keyup事件，當獲取到的值爲非數字時，直接將輸入框清空，這樣能夠實現禁止輸入漢字之類的非法字符css

<!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>

相關標籤/搜索

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。