javascripttextareacursor-position

How to control behavior in Textarea with JavaScript


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

Solution

  • This is the solution, that worked for me:

    function cursorPosition() {
var content = el_codo;
if((el_codo.selectionStart!=null)&&(el_codo.selectionStart!=undefined)){
    return content.selectionStart;
}
else {
    return false;
}

    }