Красивый textarea

Тема в разделе "Другие языки", создана пользователем yeaahhh, 29 ноя 2010.

Модераторы: Цукер
  1. yeaahhh

    yeaahhh

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

    Перейти по ссылке

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

    Буду очень благодарен..
     
  2. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    Делается очень просто. Берется файл:
    http://static.myibibo.com/js/feedcom.1288700555.js

    а тексареа описывается таким образом..и все:)
    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>
     
  3. Alternator

    Alternator

    Регистр.:
    23 мар 2009
    Сообщения:
    295
    Симпатии:
    145
    ошиблись разделом
    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>
    
     
    yeaahhh нравится это.
  4. yeaahhh

    yeaahhh

    Регистр.:
    8 май 2008
    Сообщения:
    278
    Симпатии:
    11
    Alternator, не подскажете, а как добавить к этому коду ещё и <input type="submit">? Чтобы при раскрытии textarea появлялась ещё и кнопка..
    Заранее огромное спасибо!
     
  5. Alternator

    Alternator

    Регистр.:
    23 мар 2009
    Сообщения:
    295
    Симпатии:
    145
    кнопка рядом с textarea, или всегда в одном месте страницы?
     
  6. yeaahhh

    yeaahhh

    Регистр.:
    8 май 2008
    Сообщения:
    278
    Симпатии:
    11
    Alternator, рядом с textarea..
     
  7. Alternator

    Alternator

    Регистр.:
    23 мар 2009
    Сообщения:
    295
    Симпатии:
    145
    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 в следующий раз когда постучитесь мне в личку будьте готовы что я предложу свои услуги уже на платной основе
     
    yeaahhh нравится это.
  8. Xata6

    Xata6 Постоялец

    Регистр.:
    20 мар 2007
    Сообщения:
    84
    Симпатии:
    5
    а не проще менять стиль textarea при нажатии и потере фокуса и все, и не нада кучу кода лишнего..) :)