jquery input.focus + wrap无法输入输入答案

【问题标题】：jquery input.focus + wrap can't type in inputjquery input.focus + wrap无法输入输入
【发布时间】：2010-11-09 23:38:45
【问题描述】：

$('input').focus(function() {
      $(this).next("div.description").slideToggle("slow");
      $(this).wrap(' <
          div > < /div>').select('input'); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<blink>
  <input type="text" class="form-text required" value="" size="35" id="editfiled" name="somename" maxlength="128">
  <div class="description">
    <p>some text</p>
</blink>

然后我无法输入此输入。

如果输入获得焦点，我需要它必须在 div 中突出显示。

【问题讨论】：

为什么需要blink 元素？

标签： javascript jquery input focus

【解决方案1】：

你遇到了一个圈子。

如果输入获得焦点，则将其包装到 div 中。
由于这是对标记的重建，输入将失去焦点。如果再次单击它，将再次触发焦点，另一个 div 将围绕输入等等。

你可以这样尝试：

$('input').focus(function () {      
  if(!$(this).data('wrapper'))
  {
      $(this).next("div.description").slideToggle("slow");

      $(this).data('wrapper',$(this).wrap('<div/>').parent());
      var _this=this;
      setTimeout(function(){_this.focus();},10);
  }
  else
  {
    this.select();
  }
});

它将 wrapper-div 存储为输入的 data()，因此如果输入已经被包装，该函数将不会做任何事情。

如果您在某处删除了包裹在输入周围的 div，请不要忘记从 data() 中删除包装器。

（在 Firefox 中，当 slideToggle 完成时选择会丢失，也许您需要其他解决方案来显示/隐藏描述）

【讨论】：

【解决方案2】：

它应该看起来像这样（.select() 调用没有参数）：

$('input').focus(function () {  
   $(this).next("div.description").slideToggle("slow");
   $(this).wrap('<div></div>').select();
});

You can test it here.

【讨论】：

还是有问题。输入门槛阻塞
@sjcris - 在哪个浏览器中？我对这里的演示没有任何问题。