以编程方式触发文本光标，就像用户实际点击输入标签一样答案

【问题标题】：Trigger text cursor programmatically like user actually clicked input tag以编程方式触发文本光标，就像用户实际点击输入标签一样
【发布时间】：2023-03-09 21:11:01
【问题描述】：

我正在尝试使用诸如 Gmail 电子邮件输入标签之类的 javascript 在文本字段中输入一些值。但是问题发生在一些花哨的动画占位符绑定到一些我不知道如何触发的事件上，如下图所示：

没有焦点/选择的输入标签：在此处输入内容后输入：带焦点/选择的输入标签：

那么我赋值后，我的值和花哨的占位符就会互相重叠。

我尝试了多种方法，聚焦/选择/单击/两者，没有任何效果。所以我在想，如果我可以触发那个动画，就像用户实际点击它然后将值分配给它可能会起作用。

我怎样才能做到这一点？还是有任何其他方法可以让该动画或其输入检查代码捕获我分配的值，因此在该占位符之后不会下降并与我的值重叠？

【问题讨论】：

标签： javascript html css input click

【解决方案1】：

我不确定您是如何构建输入的，因此可能有一种更简单的方法来处理它。因为我个人使用JQuery，所以我会使用.toggle() 函数。

$(element).toggle();

您还可以使用.css() 函数更改css 属性。只需创建一个焦点事件并在其中更改颜色等。

希望那是您所要求的。祝你好运:)

【讨论】：

【解决方案2】：

您可以使用 jQuery 中的 focus 和 focusout 并使用 removeClass 和 addClass 切换类。

例如，你可以这样做：

$("input").focus(function(){
  $(this).parent().addClass("is-active is-completed");
});

$("input").focusout(function(){
  if($(this).val() === "")
    $(this).parent().removeClass("is-completed");
  $(this).parent().removeClass("is-active");
})

您也可以使用materialize css's input。

【讨论】：