单击文本输入时我该怎么做？答案

【问题标题】：How do I do something when a text input is clicked?单击文本输入时我该怎么做？
【发布时间】：2013-11-16 09:36:30
【问题描述】：

这里是 jQuery 的完全初学者，我假设这个问题的答案很简单，所以我很抱歉。

我有一个这样的登录表单：

<table id="login_form">
    <tr>
        <td class="login_label">Username: </td>
        <td><input type="text" class="login_input" /></td>
    </tr>
    <tr>
        <td class="login_label">Password: </td>
        <td><input type="password" class="login_input" /></td>
    </tr>
</table>

以及 jQuery 代码：

$(".login_input")
    .focus(function(){
        alert("Why do I never get this alert?");
    }
);

为什么，当我单击两个文本输入字段中的任何一个时，不显示警报？如果我将“焦点”更改为“准备好”，那么我会收到警报，所以我假设它与此有关。

【问题讨论】：

给两个输入框一个单独的ID，然后给它们添加焦点监听器
恐怕通过这些修复，您会收到一个接一个的警报。
但您可以为两者显示不同的消息
@shadow：我指的不是您的评论，而是仅用 $(document).ready() 包装代码而不进行其他更改的解决方案。我试过了，但是当警报显示时我必须按确定，在该字段重新获得焦点并再次显示警报之后。

标签： javascript jquery text input focus

【解决方案1】：

您需要输入document.ready，以便在将元素添加到DOM并且DOM准备好时执行绑定代码。 ready 在您的代码中工作，因为它等待将元素添加到 DOM 中。

Live Demo

$(document).read(function(){
   $(".login_input").focus(function(){
        alert("Why do I never get this alert?");
    });
});

传递给 .ready() 的处理程序保证在 DOM 已准备就绪，因此这通常是附加所有其他内容的最佳位置事件处理程序并运行其他 jQuery 代码。使用依赖的脚本时关于CSS样式属性的取值，参考很重要外部样式表或在引用之前嵌入样式元素脚本，reference。

【讨论】：

【解决方案2】：

演示 http://jsfiddle.net/vNCs2/

API：

http://api.jquery.com/ready/

虽然 JavaScript 提供了用于执行代码的加载事件，但当页面被渲染，直到所有资产都不会触发此事件如图像已完全接收。在大多数情况下，一旦 DOM 层次结构已完全运行，脚本就可以运行建造。传递给 .ready() 的处理程序保证是在 DOM 准备好之后执行，所以这通常是最好的地方附加所有其他事件处理程序并运行其他 jQuery 代码。使用时依赖 CSS 样式属性值的脚本，这很重要在之前引用外部样式表或嵌入样式元素引用脚本。

代码

$(function () {
$(".login_input").focus(function(){
        alert("now you do?");
    }
);
});

【讨论】：

【解决方案3】：

将您的代码包装在$(document).read(function(){<code here>}); 中，这将在文档准备好后运行代码：

$(document).read(function(){
   $(".login_input").focus(function(){
        alert("Why do I never get this alert?");
   });
});

演示：

http://jsfiddle.net/2DS3g/

【讨论】：

【解决方案4】：

alert 没有出现的原因是缺少 wrapper $(document).ready(function() {...});

添加会产生另一个问题，无限循环的警报：

您选择其中一个字段
字段获得焦点
触发焦点事件
显示警报
你点击确定或ESC
警报已关闭
字段重新获得焦点
再次触发焦点事件...

Infinite loop of jQuery focus() event with a element 中描述了为什么会这样。你可以试试$(this).blur();:

$(document).ready(function() {
    $(".login_input").focus(function() {
        $(this).blur();
        alert("Here is my alert!");
    });
});

但问题几乎相同。

在某些实际应用程序中，您很可能不会调用 alert()。例如，将alert() 更改为console.log 即可解决问题：

$(document).ready(function() {
    $(".login_input").focus(function() {
        console.log("field in focus");
    });
});

【讨论】：