How to move the cursor to the end of content with span of a contenteditable element after Focus

Question

I am making an input text using contenteditable, what I need is a Javascript button that when you click Focus in this field, I even managed, but after that I need to put the cursor at the end of the content, for the user to continue editing, so that the operation is equal to an input, motto that within this div may also have Ivs and spans, see what I already have:

$(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>

Answer 1

Here is a solution using the crease and the 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>

This answer is based on this reply soen

Answer 2

Lazyfox’s answer is almost correct, but the child elements affect the cursor, in case the range.setStart(el, 1); will move the cursor on the parent, but any Element (textNode "does not count") inside also has to go through the behavior, it turns out that the cursor is barred in the first child element it finds, so what you can do is take the last child HTML element (if it exists) and apply the setStart in it, example:

$(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>