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
– Pointy, Commented Mar 24, 2022 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
– Karion White, Commented Mar 29, 2022 at 13:32

Karion White · Accepted Answer · 2022-03-29 13:36:17Z

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, 2022 at 13:36

Karion White

114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to control behavior in Textarea with JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related