Красивый textarea

yeaahhh

yeaahhh

Старатель
Регистрация
8 Май 2008
Сообщения
278
Реакции
11
Ребят, подскажите, пожалуйста.. Есть ли где-нибудь готовое решение данной реализации textarea? (Выглядит, как input, но при нажатии, выдвигается в textarea)

Для просмотра ссылки Войди или Зарегистрируйся

Надпись Add comment here..

Буду очень благодарен..
 
Делается очень просто. Берется файл:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.


а тексареа описывается таким образом..и все:)
PHP: 
<textarea value="" onkeyup="chkTxtLen(this,140,'268800202_542');" onblur="resetComBox(this,'Add comment here ...',false,'268800202_542');" onfocus="prepComBox(this,'268800202_542');" class="comInputUn" id="comTxt_268800202_542">Add comment here...</textarea>
 
ошиблись разделом
PHP не имеет никакого отношения к данному эффекту
вот как это можно сделать на JS
HTML: 
<html>
<head>
<script type="text/javascript">
window.onload=function(){
	var elems = document.getElementsByTagName('input');
	for(var i=0;i<elems.length;i++){
		if(elems[i].className=='slide'){
			var elem1=elems[i];
			var elem2 = elem1.nextSibling;
			while(elem2.tagName!='TEXTAREA')
				elem2=elem2.nextSibling;
			elem1.onfocus=(function(elem1,elem2){
				return function(){
					elem1.style.display='none';
					elem2.style.display='';
					elem2.focus();
				}
			})(elem1,elem2);
			elem2.onblur=(function(elem1,elem2){
				return function(){
					if(elem2.value==''){
						elem1.style.display='';
						elem2.style.display='none';
					}
				}
			})(elem1,elem2);
		}
	}
}


</script>
<style>

</style>
</head>
<body>
<input type="text" class="slide" />
<textarea style="display:none;"></textarea>
<input type="text" class="slide" />
<textarea style="display:none;"></textarea>


</body>
</html>
 
Alternator, не подскажете, а как добавить к этому коду ещё и <input type="submit">? Чтобы при раскрытии textarea появлялась ещё и кнопка..
Заранее огромное спасибо!
 
кнопка рядом с textarea, или всегда в одном месте страницы?
 
Alternator, рядом с textarea..
 
HTML: 
<html>
<head>
<script type="text/javascript">
window.onload=function(){
	var elems = document.getElementsByTagName('input');
	for(var i=0;i<elems.length;i++){
		if(elems[i].className=='slide'){
			var elem1=elems[i];
			var elem2 = elem1.nextSibling;
			while(elem2.tagName!='TEXTAREA')
				elem2=elem2.nextSibling;
			var elem3=elem2;
			while(!(elem3.tagName=='INPUT' && elem3.type=='submit'))
				elem3=elem3.nextSibling;
			elem1.onfocus=(function(elem1,elem2,elem3){
				return function(){
					elem1.style.display='none';
					elem2.style.display='';
					elem3.style.display='';
					elem2.focus();
				}
			})(elem1,elem2,elem3);
			elem2.onblur=(function(elem1,elem2,elem3){
				return function(){
					if(elem2.value==''){
						elem1.style.display='';
						elem2.style.display='none';
						elem3.style.display='none';
					}
				}
			})(elem1,elem2,elem3);
		}
	}
}
</script>
<style>
</style>
</head>
<body>
<input type="text" class="slide" />
<textarea style="display:none;"></textarea>
<input style="display:none;" type="submit" />
<input type="text" class="slide" />
<textarea style="display:none;"></textarea>
<input style="display:none;" type="submit" />
</body>
</html>
PS в следующий раз когда постучитесь мне в личку будьте готовы что я предложу свои услуги уже на платной основе
 
а не проще менять стиль textarea при нажатии и потере фокуса и все, и не нада кучу кода лишнего..) :)
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху