在輸入元素中搜索插入相同數字或字母數字值

Question

我想遍歷所有輸入元素並查找是否存在相同的值。

例如，當用戶插入1（一）然後再插入數字1（一）時，我想應用CSS來改變輸入元素的背景顏色爲這兩個相等的值，或不管多少他們可能是。

如果用戶嘗試插入字母數字值，則JavaScript會處理代碼並添加selected-wrong-input CSS類。

我希望在該元素上有setInterval 2秒鐘，並從輸入中取出字母數字值，以便用戶能夠再次插入一個數字。

我不介意建議的解決方案是使用JavaScript，jQuery還是兩者的組合。

的HTML代碼：

<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">  
    <input id="posA100" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)"> 
    <input id="posA101" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)"> 
    <input id="posA102" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)"> 
    <input id="posA103" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)"> 
    <input id="posA104" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)"> 
    <input id="posA105" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)"> 
    <input id="posA106" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)"> 
    <input id="posA107" type="text" class="input seat_box selected-wrong-input" onchange="bc.seatBoxHandleEvent(this)"> 
</div> 

的JavaScript代碼。首先是被稱爲在HTML input元素onchange

bc.seatBoxHandleEvent = function (el) { 
    bc.checkInput(el); 

    var seatNumberFirstFloor = $('#dynamic-bus-builder-1'); 

    if (seatNumberFirstFloor && seatNumberFirstFloor.valueOf()) { 
    var leftStreaming = (event.target.id); 
    var rightStreaming = 'posB1' + leftStreaming.substring(5, 7); 
    document.getElementById(rightStreaming).innerHTML = event.target.value; 
    } 
} 

bc.checkInput = function (el) { 

    let $el = $(el); 

    var targetValue = event.target.value; 
    var id = event.target.id; 
    var classOfInput = event.target.classList; 

    if (targetValue !== 8 && targetValue !== 0 && (targetValue < 48 || targetValue > 57)) { 
    console.log('valid number'); 
    console.log(classOfInput); 
    $(el).toggleClass('selected'); 

    } 
    else { 
    console.log('invalid character'); 
    $(el).toggleClass('selected-wrong-input'); 
    //console.log(el.value); 
    } 

    var array = new Array(120); 
    var existsValue = false; 

    for(var i = 0; i <= array.length; i++) { 
    console.log(el.value); 
    console.log(i); 
    if (el.value === array[i]) { 
     console.log('hi'); 
     console.log(el.value); 
     console.log(array[i]); 

     var existsValue = true; 
     console.log('existsValue'); 
     console.log('equal number forbidden'); 
     //break; 
    } 
    } 

Answer 1

我建議使用IsNaN()功能檢查，如果輸入的是一個數字的情況。對於輸入字段，keyup事件也更好。

var inputList = []; 
$('.seat_box').keyup(function(elem){ 
    if(IsNaN(elem.value)) return; //input isn't numeric, add your functionality 
    if (!valueExists(elem)) inputList.push(elem.value); 
    else //dublicate value, add functionality 
}); 

function valueExists(elem) { 
    $(".seat_box").each(function(elem) { 
    if ($.inArray(this.value, inputList) != -1) return true; 
    else return false; 
    }); 
}