Блог

Я определил высоту текстовой области, и кнопка настроена на отображение none. Я хочу изменить высоту текстовой области (на фиксированную высоту) и показать кнопку, если я нажму внутри текстового поля.

HTML:

 <div class="wrap">
    <textarea class="ta"></textarea>
    <div class="clear"></div>
    <button>OK</button>
</div>
  

CSS:

 textarea{
    height:15px; 
    width: 200px;
}

.clear{
    clear:both;
}

button{
    display:none;
}
  

Как вы можете видеть, текстовая область имеет высоту 15 пикселей. Итак, как только я нажимаю на нее, я хочу изменить высоту на 100 пикселей, а также хочу показать кнопку.

Вы можете увидеть тот же код в jsfiddle здесь . Спасибо за любую помощь.

@user966585; посмотрите этот пример с pure css :

 textarea{height: 15px; width: 200px;}
textarea:focus{height:100px;}
textarea:focus ~ button{display:block}
.clear{clear:both;}
button{display:none;}
  

http://jsfiddle.net/sandeep/fZHMF/15/

Просто привязать к click событию textarea :

 $("textarea").click(function() {
   $(this).height(100);
   $("button").show();
});
  

Вот обновленная скрипка. Возможно, вы захотите сделать эти селекторы более конкретными, чтобы не применять их к каждому textarea button элементу и на странице.

Вот обновленный jsfiddle. Он изменит свою высоту при фокусировке и вернется к исходному размеру при размытии. В качестве альтернативы, вместо использования .css() , вы могли бы использовать addClass и removeClass .

 $('.ta').click(function () {       
         $( this ).css( "height"," =85" );
         $("button").show();

        });