Ir para conteúdo

POWERED BY:

Arquivado

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

Modugno

Textarea igual ao Twitter

Por , em Javascript

Recommended Posts

Modugno    4

Modugno
Postado

Fala galera, hoje cedo estava tentando criar uma textarea parecida com a do twitter, na qual quando excede o número de caracteres, ele pinta o background de vermelho.

Eu fiz aqui de um jeito, porem eu to achando meio gambiara, pois estou usando uma DIV pra pintar.. e mesmo assim ainda está dando problema por que ela não ta pulando pra linha de baixo (quando começa a pintar) ela só fica la linha corrente!

Como vocês fariam? Alguem tem ideia de como criar esse efeito de limite de caracteres?

 

de uma olhada no que eu fiz.

 

http://jsfiddle.net/2Ln46x5o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

mickj    0

mickj
Postado

Boa tarde cara, eu vi seu codigo e achei algo parecido:

 

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3>Your text here</h3>
<div contenteditable="true" id="myDiv">edit me
</div>
<p>
<h3>Stuff over 19 characters</h3>
<div id="extra">
</div>
<p>
<h3>Sample output</h3>
<div id="sample">

</div>
</body>
</html>

CSS:

.highlight {
color:red;
}

JQUERY:

$(document).ready(function() {
$('#myDiv').keyup(function() {
var content = $('#myDiv').html();
var extra = content.match(/.{19}(.*)/)[1];

$('#extra').html(extra);

var newContent = content.replace(extra, "<span class='highlight'>" + extra + "</span>");
$('#sample').html(newContent);
});
});

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