i am currently trying to design a Terminal in JavaScript. Unfortunately do i have an issue in tracking where something is getting included or deleted. Here a possible Solution (https://stackoverflow.com/questions/7745867/how-do-you-get-the-cursor-position-in-a-textarea), but i do not really like it and it would be great, if there were an other option that is easier to include.
Here is what i have:
wp.html
<!DOCTYPE html>
<html lang="de">
<title>CODO</title>
<head>
<title>Codo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<button id="ist_da">Ist da</button>
<textarea id = "Codo" class = "codo_text_area"></textarea>
<script src="codo.js"></script>
<script src="ist_da.js"></script>
</body>
</html>
main.css
.codo_text_area{
background-color: rgb(25, 25, 25);
color: rgb(5, 255, 5);
height: 90%;
width: 40%;
position:absolute;
left: 100px;
right:auto;
border: 20px solid gray;
resize: none;
}
codo.js
let ist_da_Button = document.getElementById("ist_da");
ist_da_Button.addEventListener("click",ist_da);
let el_codo = document.getElementById("Codo");
let el_cols = check_cols()
el_codo.value = ">>>"
el_codo.addEventListener("focus",codo_onfocus);
el_codo.addEventListener("blur",codo_blur)
el_codo.addEventListener("keydown",codo_keydown)
//EventListener for behavior
function codo_keydown(e){
if(e.code == "Enter"){
el_codo.value = el_codo.value + "\n>>>"
e.preventDefault();
}else if(e.code == "Backspace" && el_codo.value.endsWith("\n>>>")){
el_codo.value = el_codo.value.substring(0,el_codo.value.lastIndexOf("\n>>>"))
e.preventDefault()
}else if(e.code == "Backspace" && el_codo.value == ">>>"){
e.preventDefault()
}
}
function codo_blur(){
el_codo.style.color = "rgb(5,200,5)"
}
function codo_onfocus(){
el_codo.style.color = "rgb(5,255,5)"
}
//gives back how many line are in text
function check_cols(){
let v = el_codo.value;
let g = 0;
for(let c in v){
if(v[c] == "\n"){
g = g + 1;
}
}
return g
}
If you have any ways to improve this in any way possible just tell me. JavaScript is after all new for me and tips are greatly appreciated
This is the solution, that worked for me:
}