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

【问题标题】：Input focus field then add class on page load输入焦点字段，然后在页面加载时添加类
【发布时间】：2016-11-22 15:00:05
【问题描述】：

好的，我有一个带有 .cf-se-input 类的输入字段。我希望该字段尽快以 jquery 为重点，并准备好文档。此外，如果当用户单击输入字段或通过 jquery 焦点时该字段变为焦点，我想将类添加到 ID 为#searchput 的 div。这是整顿。

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

.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 或手动来聚焦字段。我希望两者都被覆盖。因此，如果用户单击输入并且它变得专注，我仍然想将类添加到#searchput。此外，如果在页面加载 jquery 强制输入字段集中，我仍然希望 #searchput 在其上添加类 .cfse_a。

【问题讨论】：

【解决方案1】：

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

您可以致电$('.cf-se-input').focus() 将焦点移至您的文本区域。

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

【讨论】：

我试过 $('.cf-se-input').focus(); $('.cf-se-input').focus(function() { $('#searchput').addClass('cfse_a'); });这就是我尝试过的，但是在准备好文档时，输入字段集中在焦点上，但是在专注的 addcalss 上不起作用。

【解决方案2】：

要让用户专注于突出显示，最简单的方法是只使用 CSS

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

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

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

【讨论】：