如何在该文本框的keydown事件上获取文本框的ID答案

【问题标题】：How to get the id of the textbox on keydown event of that textbox如何在该文本框的keydown事件上获取文本框的ID
【发布时间】：2013-04-25 12:58:54
【问题描述】：

我的页面中有一个文本框：

<td>
<input type="text" id="Approvers1" size="11" onkeydown="AddUsersKeyDown(event)" style="width: 470px;" />
</td>

这是我的js函数：

function AddUsersKeyDown(evtobj) {

    if (evtobj.keyCode == 75 && evtobj.ctrlKey) {

        AddUsers(--input parameter--);
    }
}

现在，如果我在我的文本框中按 ctrl k，它必须调用另一个名为 AddUsers(--input parameter--).. 的 javascript 函数。其中 输入参数应该是文本框的 id.. .

如何实现这一点.. 我需要文本框的 id 或至少 DOM 对象，以便我可以从 DOM 对象访问文本框的 id..

请帮助我实现这两件事中的任何一件。

【问题讨论】：

标签： javascript asp.net onkeydown onkeyup

【解决方案1】：

首先你应该将函数重命名为AddUsersKeyDown，这样keydown事件就会被触发。在事件对象上，有一个target 属性，它具有触发DOM 元素。您可以使用该信息来获取 ID。

 <input type="text" id="Approvers1" size="11" onkeydown="AddUsersKeyDown(event)" style="width: 470px;" />

还有 Javascript：

function AddUsersKeyDown(evtobj) {

    var target = evtobj.target || evtobj.srcElement;

    if (evtobj.keyCode == 75 && evtobj.ctrlKey) {
        AddUsers(target.id);

        return false;
    }
}

这是一个 jsfiddle：http://jsfiddle.net/q26Nv/3/

【讨论】：

在 IE8 中的 target.id 中出现脚本错误...在 chrome 和 firefox 中工作正常
小提琴没有更新，只有例子.. :) 现在看看！
谢谢你工作正常...但是'k'正在我的文本框中输入...如何防止这种情况..
在AddUsers() 之后添加return false; 我已经更新了小提琴和示例。

【解决方案2】：

使用this获取DOM元素或this.id获取元素的id

<td>
<input type="text" id="Approvers1" size="11" onkeydown="AddUsersKeyDown(event,this.id)" style="width: 470px;" />
</td>

function AddUsersKeyDown(evtobj,id) {

    if (evtobj.keyCode == 75 && evtobj.ctrlKey) {

        AddUsers(id);
    }
}

【讨论】：

这工作正常...但是'k'正在我的文本框中输入...如何避免这种情况..
只有当按下的键是 ctrl k 时才调用 AddUsers 函数...所以 k 被附加到文本框中
使用 evtobj.stopPropagation();调用函数后停止进一步传播
在 evtobj.stopPropagation() 行将脚本错误视为“对象不支持此属性或方法”；在 IE8 中...

【解决方案3】：

得到 jquery这里

然后采取 onkeydown

<input type="text" id="Approvers1" class="keydown" size="11" style="width: 470px;" />

添加脚本

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function() {
    $('.keydown').keydown(function() {
       console.log( $(this).attr('id') );
    });
});
<script>

可能有很多代码，但你可以确定它是跨浏览器的 documentation

【讨论】：

【解决方案4】：

你可以：

function AddUserKeyDown(evtobj) {
    evtobj = evtobj || window.event;
    var target = evtobj.target || evtobj.srcElement;

    if (evtobj.keyCode == 75 && evtobj.ctrlKey) {
       AddUsers(target.id);
    }
}

（顺便说一句，你的函数名称不匹配）

【讨论】：