Focus una sola volta - Jquery

Question

ciao amici ho una textarea e voglio usare le funzioni animate() e css() con questo elemento.

css() la funzione funziona correttamente ma il problema è focus() func. Dopo il caricamento della pagina è tutto a posto,

quando mi concentro su textarea, la sua altezza aumenta di 50px, ma quando sfocato e quindi si concentra nuovamente su textarea, l'altezza aumenta di nuovo di 50 px.

Non voglio utilizzare la funzione blur().

La mia domanda riguarda la funzione focus(). Voglio utilizzare focus() una volta per pagina.

<script> 
       $(document).ready(function(){ 
        $("#sharePost").focus(function(){ 
        $(this).animate({height:"+=50px"}); 
        $(this).css("background-color","#ffccdd"); 
        }); 
        $("#sharePost").blur(function(){ 
        //$(this).animate({height:"-=50px"}); 
        }); 
       }); 
</script> 

Answer 1

Per generare un evento una sola volta, è possibile utilizzare la funzione di one(), che attribuisce un listener di eventi, allora la taglia dopo la prima volta che viene sparato:

$(document).ready(function(){ 
    $("#sharePost").one('focus', function(){ 
     $(this).animate({height:"+=50px"}); 
     $(this).css("background-color","#ffccdd"); 
    }); 

}); 

Working Demo

Answer 2

È possibile farlo facilmente utilizzando jQuery's .one() function. Questo fa solo scattare il gestore eventi al massimo una volta per l'elemento a cui è collegato.

In questo caso non è necessario utilizzare $(document).ready(function()... (a meno che lo script non sia prima di l'elemento #sharePost). A titolo di esempio per voi potrebbe solo fare:

$("#sharePost").one("focus", function(){ 
    $(this).animate({height:"+=50px"}); 
    $(this).css("background-color","#ffccdd"); 
}); 

Dopo il primo focus sull'elemento, il gestore contenente il .animate e CSS non sarà mai funzionare ancora. Si può andare da lì se si vuole ridursi quando la messa a fuoco lascia l'elemento.