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

它应该是这样的（.select()调用没有参数）：

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

You can test it here

Answer 2

你遇到了一个圈子。

如果输入获得焦点，则将其包装到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结束时选择会丢失，也许你需要另一个解决方案来显示/隐藏描述）

jquery input.focus + wrap无法输入

2 个答案: