如何使用JavaScript控制Textarea中的行为



我目前正在尝试用JavaScript设计一个终端。不幸的是,我在跟踪哪些内容被包含或删除时遇到了问题。这里有一个可能的解决方案(https://stackoverflow.com/questions/7745867/how-do-you-get-the-cursor-position-in-a-textarea),但我不是很喜欢它,如果有其他更容易包含的选项
这是我所拥有的:

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
}

如果你有任何方法可以以任何可能的方式改进这一点,请告诉我。JavaScript对我来说毕竟是新的,非常感谢你的提示

这是对我有效的解决方案:

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

}

最新更新