2

Bom dia, recentemente eu estava escrevendo esse código e tive alguns problemas, eu gostaria de obter o número de linhas do conteúdo de uma div "contenteditable" e levar esses valores (números) para outra div.

Segue o meu código simplificado:

	$(document).one('paste',function(e) {
		setTimeout(function() {
		var x = $('#input').contents().length;
     		$("#line").append ('<div>'+x);
		},100);
	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div contenteditable="true" id="input" spellcheck="false"></div>
<div id="line"><div>0</div></div>

Os resultados que eu estou obtendo quando o número de linhas em #input é 4:

<div id="line">
    <div>0</div>
    <div>4</div>
</div>

Simulação dos resultados que eu gostaria de obter quando o número de linhas em #input é 4:

<div id="line">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Apenas lembrando que em <div id="line"><div>0</div></div> já temos um zero inicialmente.

Resumidamente o problema é que estou obtendo apenas uma div com o valor de todas as linhas, eu gostaria de ter uma div para cada linha.

Na espera de alguma ajuda, obrigado.

2
  • nao entendi muito bem ... será algo como isto? jsbin.com/pisozen/2/edit?html,css,js,output
    – balexandre
    12/07/2019 às 12:01
  • @balexandre Sim, seu exemplo é basicamente oque eu quero, por favor, poste-o como uma resposta, mais tarde eu verei as próximas e irei avaliar a melhor. Obrigado!
    – Lima
    12/07/2019 às 12:21

2 Respostas 2

2

Sem o uso de jquery pode fazer algo assim:

function criarDivs(input){
  // TODO:: validação do input
  let total = document.getElementById('input').innerText;
    
  for (let i=1; i<=total; i++){
    let div = document.createElement('div');
    div.innerText = i;
    document.getElementById('line').appendChild(div);
  }
  
}
#input{
  width:100px;
  height:20px;
  background-color:#ccc
}

#line div{
  background-color: gold;
  margin:4px;
}
<div contenteditable="true" id="input">4</div>
<button type="button" onclick="criarDivs()">CRIAR DIVS</button>
<div id="line"></div>

1
  • Alternativa interessante, supondo que não usa jquery, obrigado!
    – Lima
    12/07/2019 às 21:53
1

A pedido pelo comentário, aqui fica o exemplo.

Nomeadamente, apenas uso o on("blur") que significa, quando nao tem focus, ou seja, quando clica fora do input, e depois de contar as linhas, por cada linha, adiciono o <div> que pretende ...

$(function() {
  $("#input").on("blur", function(evt) {
    // numero de linhas do conteudo
    var len = $(this).contents().length;
    // cria output
    draw(len);
  });
});

function draw(lines) {
  // limpa #line para que comece sem conteudo
  $("#line").empty();
  
  // adiciona <div>X</div> por cada linha
  for(i = 0; i < lines; i += 1)
    $("#line").append("<div>"+i+"</div>");
}
#input {
  min-height: 100px;
  min-width: 100px;
  border: 1px dashed #bada55;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div contenteditable="true" id="input" spellcheck="false"></div>
<div id="line"><div>0</div></div>

2
  • Obrigado, sua resposta realmente me ajudou, porém eu gostaria de manter o "paste" pois preciso detectar os eventos "paste" do mouse e do teclado. Já tentei modificar algumas coisas, mas sem sucesso. Alguma solução?
    – Lima
    12/07/2019 às 21:52
  • 1
    Resolvido, linha modificada >> "$('#input').on('input paste',function(e)" obrigado mais uma vez!
    – Lima
    12/07/2019 às 22:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .