javascript - jquery input.focus+wrap 无法输入输入

Question

$('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 内突出显示。

Answer 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 完成时，选择会丢失，也许您需要其他解决方案来显示/隐藏描述)