Установите положение курсора в дочернем элементе редактируемого div (третья строка), когда пользователь нажимает enter в первой строке с помощью javascript
Когда пользователь нажимает enter в редактируемом div, позиция курсоров (текстовая каретка) должна двигаться на две строки вниз вместо одной, потому что вторая строка (дочерний div) будет содержать вывод (не редактируемый), а третья строка будет содержать новый входной div (редактируемый), где теперь должен находиться курсор.
Я сделал простую картину, чтобы проиллюстрировать.
проект кода — Postimage.org[^]
Может ли кто-нибудь объяснить, как это можно сделать?
Что я уже пробовал:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaS.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<style>
div:focus {
background-color: Aqua;
}
#box {
background-color: lightblue;
width: 600px;
height: 600px;
border: none;
font-size: 15px;
resize: none;
overflow: auto;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div id="box" contenteditable="true" onkeypress="parse(event, this)"></div>
<script> setfocus(); </script>
</body>
</html>
В JavaScript JavaS.js
// first row cursor position in textarea inputbox on page load
function setfocus() {
document.getElementById('box').focus();
}
// counts the number of times the user push enter
function increment() {
increment.n = increment.n || 0;
console.log("increment.n = " + increment.n);
return ++increment.n;
}
function parse(e) {
var key = window.event.keyCode;
if (key == 13) { //keycode for enter
event.preventDefault();
// creates child div for output
var div2 = document.createElement("div");
div2.setAttribute("contenteditable", "false");
// div2.setAttribute("tabindex", "1");
div2.style.background = "lightgreen";
div2.style.height = "auto";
div2.style.width = "600px";
document.getElementById("box").appendChild(div2);
// assign output to child div
var input = document.getElementById('box').innerText;
console.log("input = " + input);
var output = eval(input);
console.log("output = " + output);
div2.innerHTML = output;
// creates new child div for input
var div3 = document.createElement("div");
div3.setAttribute("id", "div3");
div3.style.height = "20px";
div3.style.width = "600px";
document.getElementById("box").appendChild(div3);
div3.setAttribute("tabindex", "0");
}
}
// an array with random numbers between -1 and 1
function rand(n) {
x = [];
for (var i = 0; i < n; i++) {
x[i] = Math.random() * 2 - 1;
}
console.log("x = " + x);
return x;
}