单击文本输入时如何执行某些操作

How do I do something when a text input is clicked?

本文关键字：执行 操作 输入 文本 何执行 单击      更新时间：2023-09-26
在这里

完全是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?");
    }
);

为什么当我单击两个文本输入字段中的任何一个时，警报不显示？如果我将"焦点"更改为"就绪"，那么我会收到警报，所以我假设这是与此有关的事情。

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

现场演示 

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

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

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

应用程序接口：

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

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

法典 

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

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

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

演示：

http://jsfiddle.net/2DS3g/

警报未显示的原因是缺少包装$(document).ready(function() {...});

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

  • 选择其中一个字段
  • 该领域获得焦点
  • 焦点事件（如果触发）
  • 显示警报
  • 单击"确定"或"ESC
  • 警报已关闭
  • 字段重新获得焦点
  • 焦点事件再次触发...

为什么会这样，在带有元素的 jQuery focus（） 事件的无限循环中描述了。您可以尝试使用$(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");
    });
});
相关文章：