How to control behavior in Textarea with JavaScript

Question

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

Surely the formatting of this question does not look OK to you. — Pointy, Mar 24 '22 at 15:29
A Text Area has the attribute selectionStart and selectionEnd for my purpose i just need selectionStart and some check if it is defined and != null. Thats all to it. — Karion White, Mar 29 '22 at 13:32

score 0 · Accepted Answer · answered Mar 29 '22 at 13:36

0

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;
}

}

answered Mar 29 '22 at 13:36

Karion White

11
4

How to control behavior in Textarea with JavaScript

1 Answers1