0

Estou fazendo um input text usando contenteditable, o que preciso é um botão em Javascript que ao clicar de o focus nesse campo, até consegui, mas depois disso preciso colocar o cursor no final do conteúdo, para o usuário continuar editando, para o funcionamento ser igual a um input, lemabrando que dentro dessa div pode ter também divs e spans, veja o que já tenho:

$(document).on('click', '.btn', function (e) {
  $('.formfield').focus();
});
.formfield{
	width: 200px;
	height: 30px;
	display: block;
	margin-bottom: 15px;
	border: solid 1px #000000;
	resize: none;
}
.btn{
	width: 80px;
	height: 30px;
  line-height: 30px;
	display: block;
	margin-bottom: 15px;
	background-color: #380303;
  color: #ffffff;
	text-align: center;
  cursor: pointer;
}
<div class="formfield" contenteditable="true">Text <span>aa</span></div>
<div class="btn">get focus</div>

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>

2
  • 1
    @Bacco como vc penso funcionar com contenteditable, mas, não testei, vou testar, se não der certo retiro o comentário.
    – LeAndrade
    26/04/2019 às 16:38
  • 1
    @Bacco realmente aquelas respostas não corresponderam com o contenteditable.
    – LeAndrade
    26/04/2019 às 16:51

2 Respostas 2

4

Aqui vai uma solução utilizando o range e o selection :

$(document).on('click', '.btn', function (e) {
    var el = document.querySelector(".formfield");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  });
.formfield{
	width: 200px;
	height: 30px;
	display: block;
	margin-bottom: 15px;
	border: solid 1px #000000;
	resize: none;
}
.btn{
	width: 80px;
	height: 30px;
  line-height: 30px;
	display: block;
	margin-bottom: 15px;
	background-color: #380303;
  color: #ffffff;
	text-align: center;
  cursor: pointer;
}
<div class="formfield" contenteditable="true">Texto de exemplo</div>
<div class="btn">get focus</div>

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>

Esta resposta é baseada nesta resposta do SOEn

4
  • +1 Parece bom. Sabe dizer se a compatibilidade com os browsers é boa?
    – Largato
    26/04/2019 às 16:52
  • Pelo que testei funciona no Firefox, Edge, Chrome e Opera. Quanto á ovelha negra do IE não sei. O autor original menciona que versões prévias ao IE 9 irão necessitar de outro código portanto será um não.
    – lazyFox
    26/04/2019 às 16:56
  • 3
    Hoje em dia eu diria que atendendo o 11 tá mais do que bom (pq funciona no Win 7, então nao tem desculpa pra ficar desatualizado.
    – Largato
    26/04/2019 às 16:57
  • Muito obrigado, mas surgiu um problema, ele funciona apenas se tiver um conteúdo de texto.... mas se tiver um <span>, ele não vai até o fim. Vou editar minha dúvida 26/04/2019 às 17:04
2

A resposta do LazyFox esta quase correta, mas os elementos filhos afetam o cursor, no caso o range.setStart(el, 1); vai mover o cursor no pai, mas qualquer Element (textNode "não conta") dentro também tem que passar pelo comportamento, acaba que o cursor é barrado no primeiro elemento filho que encontrar, então o que pode fazer é pegar o ultimo elemento HTML filho (se existir) e aplicar o setStart nele, exemplo:

$(document).on('click', '.btn', function (e) {
    var el = document.querySelector(".formfield");

    if (el.lastElementChild) el = el.lastElementChild; //se existir elementos

    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  });
.formfield{
	width: 200px;
	height: 30px;
	display: block;
	margin-bottom: 15px;
	border: solid 1px #000000;
	resize: none;
}
.btn{
	width: 80px;
	height: 30px;
  line-height: 30px;
	display: block;
	margin-bottom: 15px;
	background-color: #380303;
  color: #ffffff;
	text-align: center;
  cursor: pointer;
}
<div class="formfield" contenteditable="true">Texto de <b>TESTE</b></div>
<div class="btn">get focus</div>

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>

2
  • Ótimo, era isso que faltava 26/04/2019 às 17:27
  • 1
    Se a última palavra for um espaço, ou &nbsp; ele não reconhece... teria como? 26/04/2019 às 18:15

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 .