Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoSouza

Tag não editável em preenchimento de campo

Por , em Javascript

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

Na verdade o título deveria ser algo como "como faço isso?" hehe

 

Vejam a imagem.
Ao preencher o campo, um script "encapsula" (creio que numa DIV) o texto digitado num input text e só deixa a possibilidade de remover (com um X no canto direito), não dá pra editar.

 

No Hotmail tb tem um esquema desses.

 

Como isso é feito?

É uma DIV dentro de um input text??

 

tag.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

isso é css puro, sem mágica.

 

http://wbruno.com.br/css/input-de-destinatariospara-hotmail/

Compartilhar este post

Link para o post
Compartilhar em outros sites

cristianoolv    93

cristianoolv
Postado 




<html>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<head>



<script type="text/javascript">


 



	window.onload = function(){


 



		var i = function(id){ return document.getElementById(id); }


 



		var ip = i('itag'),



		    li = i('ltag'),



			ul = i('utag'),



			v  = 0;


 


 


 



		function adc(name){


 



			var li = document.createElement('li');



			var sp = document.createElement('span');


 



			li.setAttribute('id',v);



			sp.setAttribute('id',v);



			li.innerHTML = name; 



			sp.innerHTML = 'x'; 



			li.appendChild(sp);



			i('utag').appendChild(li);



			sp.onclick = function(){



				i('utag').removeChild(i(this.id));



				}


 



			v++;


 



		}


 


 


 



		ip.onchange = function(){


 



		    adc(this.value);



			this.value = '';


 


 



		}


 


 


 



	   document.onkeyup=function(e){


 



   if(e.which == 188){



	    var s = ip.value;



	   if(s == ','){ ip.value = ''; return false; } 


 



       adc( s.substring(0,(s.length - 1)))



	   ip.value = '';



	 }



}


 


 



}


 



</script>



<style>



*{ margin:0; padding:0; } input:focus { outline: none;}



#utag{ 



position:absolute;



top:25%;



left:25%;


 



 padding:3px;



 border-radius:2px;



 list-style:none;



 border:1px #333 solid;



 display:inline-block



 max-with:52px;



  }


 



 #utag li{



	background:#D6DEE0;



	padding:0 10px;



	color:#333;



	display:inline-block;



	border:1px #818181 solid;



	border-radius:3px;



	margin:0 2px;


 



	}  



#utag li span{



	position:relative;



	left:5px;



	top:-3px;



	color:#000;



	font-weight:900;



}


 



#utag li span:hover{



	color:#CCCCCC;



	cursor:hand;



		}


 



#itag{ 



padding 3px;



border:0;



float:right;



}


 


 



</style>



</head>



<body>



<ul id="utag">



<input type="text" id="itag" />



</ul>



</body>



</html>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
FabianoSouza
			  

	
		
	
			 5
	
		
	

		

		

			


	
		FabianoSouza
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

William, testei o seu código... não está funcionando.


http://www.wbruno.com.br/scripts/msn/



cristianoolv, testei sua sugestão. Funfou!


 


Mas preciso fazer um ajuste para atender exatamente ao que preciso.


Seria necessário que o usuário só pudesse colocar uma string na caixa de texto (seu código permite digitar várias strigs).


Onde devo ajustar para ter este resultado?


 


Outra pergunta. Para ter esta funcionalidade em vários campos preciso de uma função desta para cada campo?


 


Obrigado.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			
@FabianoSouza, não tem script nenhum lá. Só o css.


			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito