Afficher la boîte au moment où la zone de texte est sélectionnée, en enveloppant la zone de texte.

Question

En fait, il est beaucoup plus facile de vous montrer ce que je veux réaliser plutôt que d'essayer d'expliquer.

État 1 :

Le domaine "Responsables" n'a pas d'objet. C'est assez simple.

État 2 :

Le champ des Responsables s'est concentré. Un div s'affiche autour de la zone de texte et du texte.

Il n'y a aucun problème pour afficher la boîte grise et la positionner. Le problème est de faire apparaître la zone de texte à l'intérieur de la boîte, tout en conservant sa position actuelle.

Lorsque la zone de texte est positionnée de façon absolue (avec un z-index), le contenu est bien sûr perturbé.

J'utilise jQuery.

Quelqu'un a-t-il une idée ?

Answer 1

Vous n'avez pas besoin de donner à la zone de texte une position absolue. Il suffit de lui donner position : relative et de définir le zIndex pour qu'elle se trouve au-dessus de la boîte grise. Si elle a position : static (par défaut), zIndex ne fonctionnera pas.

Answer 2

Avez-vous regardé Exposition des outils jQuery ?

---

Voici un peu de code utilisant Expose avec mouseover... J'ai aussi posté un exemple à cette adresse pastebin

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

---

Edit : Sorry, here is the code for focus & blur :

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

---

Edit #3 : Juste parce que j'ai des TOC et que je ne peux pas laisser les choses en suspens LOL... J'ai travaillé sur un script qui fait ce que vous voulez sans utiliser Expose (posté à ce pastebin également). Vous pouvez ajouter un fondu en entrée et un fondu en sortie si vous le souhaitez.

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 (j'ai essayé d'imiter votre image)

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