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>

and after that I can’t type in this input.

I need that if input gets focus it must be highlighted inside div.

Answer 1

You run into a circle.

If the input gets the focus, you wrap it into the div.
As this is a rebuilding of the markup, the input will lose the focus. If you click on it again, focus will be triggered again, another div will be wrapped around the input and so on.

You could try it like that:

$('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();
  }
});

It stores the wrapper-div as data() of the input, so if the input is already wrapped, the function would’nt do anything.

Don’t forget to remove the wrapper from data() too if you somewhere remove the div wrapped around the input.

(In Firefox the selection is lost when slideToggle is finished, maybe you need another solution to show/hide the description)