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名称，然后以某种方式将id名称与onKeyDownHanlder函数案例匹配？

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文档是查找更多信息的好地方：

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")
                }
            }
        });

    });

按Enter键时，差分输入调用差分功能

6 个答案: