jquery input.focus + wrap ne peut pas saisir l'entrée

Question

<blink> 
<input type="text" class="form-text required" value="" size="35" id="editfiled" name="somename" maxlength="128"> 
<div class="description"><p>some text</p> 

$('input').focus(function() { 

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

et après cela, je ne peux pas entrer cette entrée.

J'ai besoin que si l'entrée est mise au point, elle doit être surlignée à l'intérieur de div.

Answer 1

Vous rencontrez un cercle.

Si l'entrée obtient le focus, vous l'enroulez dans le div.
Comme il s'agit d'une reconstruction du balisage, l'entrée perd le focus. Si vous cliquez à nouveau dessus, le focus sera à nouveau déclenché, un autre div sera enroulé autour de l'entrée et ainsi de suite.

Vous pouvez essayer comme ça:

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

Il stocke l'emballage-div en tant que données() de l'entrée, donc si l'entrée est déjà enveloppé, la fonction would'nt faire quoi que ce soit.

N'oubliez pas de supprimer le wrapper de data() aussi si vous supprimez quelque part le div enroulé autour de l'entrée.

(Dans Firefox, la sélection est perdue lorsque slideToggle est terminé, vous avez besoin peut-être une autre solution pour afficher/masquer la description)

Answer 2

Il devrait ressembler à ceci (aucun paramètre à l'appel .select()):

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

You can test it here.