Aletrar o valor de um input ++
Estou tentando criar um simples sistema de tags, o problema é que preciso alterar o "value" a cada inserção de uma nova tag... ex:
adicionei a tag "teste1"
o input ficaria assim: <input id="tag" value="teste1">
Só que quando adiciono outra tag, ele está substituindo o primeiro valor. Gostaria que ficasse no mesmo input todos os valores adicionados.
<input id="tag" value="teste1 teste2 teste3">
<html>
<head>
<title>Criando elementos dinamicamente</title>
<style type="text/css">
.tag {
float: left;
border: none;
outline: none;
margin-left: 5px;
margin-top: 5px;
}
.new-tag {
list-style: none;
width: 400px;
}
.new-tag li {
float: left;
margin-left: 5px;
margin-top: 5px;
padding: 4px;
background-color: #000000;
color: #ffffff;
border-radius: 4px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tag').focus();
$('.tag').change(function(){
var tag = $('.tag').val();
$('.new-tag').prepend('<li><a href="#"></a>'+tag+'</li>');
$('#tag').attr('value', tag)
$('.tag').val("");
})
})
</script>
</head>
<body>
<div>
<ul class="new-tag">
<input type="text" class="tag">
<input type="hidden" id="tag" value="">
</ul>
</div>
</body>
</html>
Se alguém puder dar uma força...Discussão (3)
Carregando comentários...