Показать окно на фокусе текстового поля, обтекание текстового поля

Question

На самом деле гораздо проще показать вам, чего я хочу достичь, чем пытаться объяснить.

Состояние 1:

Поле «Ответственные» не имеет фокуса. Довольно просто.

Состояние 2:

Поле Ответственные получили фокус. Вокруг текстового поля и текста отображается div.

Нет проблем с отображением серой рамки и ее позиционированием. Проблема заключается в том, чтобы текстовое поле отображалось внутри поля, но при этом сохраняло свою текущую позицию.

Когда текстовое поле позиционируется как абсолютное (пробный z-индекс), содержимое конечно испорчено.

Я использую jQuery.

Есть идеи у кого-нибудь?

Answer 1

Вы смотрели на jQuery Tools Expose ?

---

Вот некоторый код, использующий Expose с наведением мыши ... Я также разместил образец в этом pastebin

$(function() {
 $("#test").hover(
  function() {
   $(this).expose({api: true}).load()
  }, function() {
   $(this).expose().close();
 });
});

---

Редактировать: Извините, вот код для фокусировки и размытия:

$(function() {
 $("#test")
  .focus(function() {
   $(this).expose({api: true}).load();
  })
  .blur(function() {
   $(this).expose().close();
  });
});

---

Редактировать # 3: Просто потому, что у меня OCD и я не могу оставить все как есть, LOL ... Я разработал сценарий, который делает то, что вы хотите, без использования Expose (также размещен на этот pastebin ) , Вы можете добавить и исчезнуть, если хотите.

CSS

input, select { width: 200px; }
#expose {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #444;
 z-index: 99;
}
.focused {
 position: relative;
 top: 0;
 left: 0;
 z-index: 100;
}
label.focused {
 color: #ddd;
}

HTML (я пытался имитировать ваше изображение)

<fieldset><legend>Fields</legend>
<label for="frespon">Responsibilites:</label><br/>
<input type="text" id="frespon" class="expose" /><br/>
<br/>

<label for="fprojectid">ProjectID:</label><br/>
<select id="fprojectid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="fstatusid">StatusID:</label><br/>
<select id="fstatusid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftypeid">TypeID:</label><br/>
<select id="ftypeid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftitle">Title:</label><br/>
<input type="text" id="ftitle" class="expose" /><br/>
</fieldset>

Scripting

$(document).ready(function(){
 $('.expose').focus(function(){
  $('<div></div>')
   .attr('id','expose')
   .appendTo('body');
  $(this).addClass('focused')
   .parent().find('label[for="' + this.id + '"]').addClass('focused');
 })
 $('.expose').blur(function(){
  $('.expose').removeClass('focused')
   .parent().find('label[for="' + this.id + '"]').removeClass('focused');
  $('#expose').remove();
 })
})

Answer 2

Вам не нужно указывать в текстовом поле абсолютную позицию. Просто дайте ему положение: относительное и установите zIndex так, чтобы он располагался поверх серого поля. Если он имеет позицию: статический (по умолчанию), zIndex не будет работать.