監(jiān)聽輸入框有值和滿足條件時，按鈕才可以點擊?

遇到這么個需求，如下圖，當(dāng)所需要的東西都不為空時，下一步按鈕才可以點擊，沒有做過不知道怎么下手，求各路大神指點迷津，在此謝過。

當(dāng)所要填的內(nèi)容不為空時，按鈕變成可點擊狀態(tài)如下圖：

回答

編輯回答

只愛你

angular,if($scope.phone && $scope.password && $scope.code){點亮下一步}

2018年2月27日 00:05

編輯回答

孤島

if (input1.value && input2.value && input3.value) {
// 可點擊
}
這是最笨的方法
一樓說的監(jiān)聽oninput事件也可以

2017年11月18日 07:08

編輯回答

念舊

每個輸入框都有一個 oninput吧,然后寫一個方法判斷三個輸入框的值,然后設(shè)置

2017年8月20日 17:07

編輯回答

厭遇

給你個參考吧，寫個函數(shù)來確認(rèn)btton是否改變，每次input變化時調(diào)用，用雙向綁定的框架就更簡單了，提交的值全部放在一個數(shù)組里面，監(jiān)聽這個數(shù)組的變化，判斷是否全部有值，進(jìn)行button的改變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .active{
           background: orange;
       }
    </style>
</head>
<body>
       <div class="box">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="file">
        <button class="btn" disabled="disabled" onclick="aaa()">下一步</button>
       </div>
                                
    <script>
        var oBox = document.getElementsByClassName('box')[0];
        var oIp = oBox.getElementsByTagName('input');
        var btn = oBox.getElementsByTagName('button')[0];
        [].slice.call(oIp).forEach(function(element) {
           if(element.type!='file'){
            element.oninput = function(){
                btnclick();
            }
           }else{
            element.onchange = function(){
                btnclick();
           }
        });
        function btnclick(){
            var flag = true;
            for(var i=0;i<oIp.length;i++){
                if(oIp[i].type!='file'){
                    if(!oIp[i].value){
                        flag = false;
                    }
                }else{
                    if(!oIp[i].files[0]){
                        flag = false;
                    }
                }               
            }
            if(flag){
                btn.disabled = false;
                btn.classList.add('active');
            }else{
                btn.disabled = true;
                btn.classList.remove('active');
            }
        }
    </script>
</body>
</html>

2017年8月3日 16:15

編輯回答