呼叫差函數與差分輸入，同時按下輸入

Question

HTML

text1:<input type="text" id="text1"/> 
<br> 
<br> 
text2:<input type="text" id="text2"/> 
<br> 
<br> 
text3:<input type="number" id="text3"/> 

JS

window.onkeydown = onKeyDownHandler; 

function onKeyDownHandler(e) 
{ 
    switch (e.keyCode) { 
      case 13: 
      if(text1){ 
      alert("text1 function"); 
      }else if(text2){ 
      alert("text2 function"); 
      }else if(text3){ 
      alert("text3 function"); 
      } 
      return; 
    } 
} 

我有我想要做的差的功能，同時按下輸入3個輸入字段。如何獲取或檢測我所在的輸入字段？當我點擊輸入字段（焦點）時，是否有某種方式可以檢查id名稱，然後以某種方式在onKeyDownHanlder函數中匹配id名稱？

Demo

像這樣的事情

if(focusidname = text1){ 
alert("text1 function"); 
} 

Answer 1

使用document.activeElement.id獲取當前聚焦元素的ID。

if(document.activeElement.id == 'text1'){ 
alert("text1 function"); 
} 

Answer 2

您可以使用event.target.id：

window.onkeydown = function(event){ 
    alert(event.target.id); 
}; 

但是似乎你的方法來連接事件會造成麻煩更多元素添加到頁面。我建議你採取不同的方法：

創建將檢測輸入功能鍵：

var whenEnterCall = function (callback){ 
    return function(event){ 
    if(e.keyCode == 13){ 
     callback(event);  
    } 
    } 
}; 

它連接到一個特定的輸入

input.addEventListener('keydown', whenEnterCall(function(event){ 
    alert('input entered ' + event.target.id); 
})); 

的MDN文檔是找到一個好地方更多關於：

• addEventListener
• Event
• getElementById
• keydown

Answer 3

function onKeyDownHandler(e) 
{ 
    switch (e.keyCode) { 
      case 13: 
      if(this.id == "text1"){ 
      alert("text1 function"); 
      }else if(this.id == "text2"){ 
      alert("text2 function"); 
      }else if(this.id == "text3"){ 
      alert("text3 function"); 
      } 
      return; 
    } 

Answer 4

$('.my-input').each(function() { 
 
    $(this).on('keyup', function(e) { 
 
    onKeyDownHandler(this); 
 
    }); 
 
}); 
 

 
function onKeyDownHandler(self) { 
 
    //id of the keyup input 
 
    alert($(self).attr('id')); 
 
    //value of the keyup input 
 
    alert($(self).val()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
text1: 
 
<input type="text" id="text1" class="my-input" /> 
 
<br> 
 
<br>text2: 
 
<input type="text" id="text2" class="my-input" /> 
 
<br> 
 
<br>text3: 
 
<input type="number" id="text3" class="my-input" />

Answer 5

$('input').keypress(function(e) { 
      var key; 

      if (e.keyCode) // IE 
      { 
       key = e.keyCode; 
      } 
      else if (e.which) //Mozilla 
      { 
       key = e.which; 
      } 
      if (key == 13) { 
       if(this.id == "text1"){ 
     alert("text1 function"); 
     }else if(this.id == "text2"){ 
     alert("text2 function"); 
     }else if(this.id == "text3"){ 
     alert("text3 function"); 
     } 
     return; 
      } 
     }); 

這可能會幫助你。

Answer 6

$(document).ready(function() { 

     $('input').keydown(function (e) { 

      if(e.keyCode == 13) 
      { 
       if($(this).attr('id')=="text1") 
       { 
        alert("text1 function") 
       } 
       else if($(this).attr('id')=="text2") 
       { 
        alert("text2 function") 
       } 
       else if($(this).attr('id')=="text3") 
       { 
        alert("text3 function") 
       } 
      } 
     }); 

    });