输入焦点字段，然后在页面加载时添加类

Input focus field then add class on page load

本文关键字：加载 添加 焦点 字段 然后 输入      更新时间：2023-09-26

好的，这是我有一个带有 .cf-se-input 类的输入字段。我希望这个字段在文档准备就绪的情况下尽快使用 jquery 聚焦。此外，如果用户单击输入字段或通过 jquery 焦点使字段变得专注，我想将类添加到 id 为 #searchput 的div 中。这是调整。

页面加载 => .cf-se-input 变成焦点 =>

.cf-se-input 成为焦点下一个代码将触发 => 如果用户单击字段或当 jquery 自动将它集中在页面加载 addClass .cfse_a 到 #searchput 时。

更进一步

这是我的搜索框 

<div id="searchput"> <input type="textarea" class="cf-se-input" /> </div>

我设置了.cfse_a样式，以便该类的任何内容都具有蓝色边框。就我而言，它不是我想要的带有蓝色边框的输入字段，我希望 searchput 的div 具有蓝色边框，但仅当输入字段聚焦时。

现在有两种方法可以通过jquery或手动聚焦字段。我希望两者都被覆盖。因此，如果用户单击输入并且它变得专注，我仍然希望将 Class 添加到 #searchput。此外，如果在页面加载 jquery 时强制输入字段聚焦，我仍然希望 #searchput 在其上添加类.cfse_a。

您需要

使用 $.focus() 方法。 请参阅文档：http://api.jquery.com/focus/。

您可以调用$('.cf-se-input').focus()以使焦点移动到文本区域。

您可以从$(document).ready调用$('.cf-se-input').focus(function() { alert('focused!'); });，以便在文本区域聚焦时执行一些代码。

要使用户集中精力突出显示，最简单的方法是仅使用CSS

.inputElement:focus {
  box-shadow: 0 0 5px #EC8937;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #EC8937;
}

如果您可以在 Jquery 文档准备就绪时向元素添加另一个类您可以在启动时突出显示输入

但请确保在不再需要焦点或用户单击其他内容时有办法删除该类

相关文章：