获取光标在文本域（textarea）中的行号与列号（代码）_陛下Ya

未知 02-07 1803

起因是想在自己的网站中嵌入一个Markdown（react）编辑器，在一个菜鸡经过各种不满意后打算自个造一个。。。。。。可能是有什么优秀方案没有被优秀的我看到吧

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } #left_div { height: 100%; width: 30px; float: left; } #left_txt { height: 100%; width: 100%; resize: none; background: rgb(247, 247, 247); background: rgb(229, 229, 229); color: #999; border: 0; overflow: hidden; padding: 10px 0; text-align: center; box-sizing: border-box; line-height: 24px; font-size: 15px; } #input { height: 100vh; width: calc(100% - 30px); resize: none; background: rgb(247, 247, 247); color: #999; outline: none; box-sizing: border-box; border: none; padding: 10px 15px; line-height: 24px; font-size: 15px; overflow-x: auto; float: left; cursor: default; } #html_con { width: 50%; height: 100%; background-color: #eaeaea; float: left; overflow-x: auto; padding: 10px 15px; box-sizing: border-box; line-height: 24px; font-size: 15px; } #l_div { width: 50%; height: 100%; box-sizing: border-box; float: left; } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar, ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #767676; } </style> <script type="text/javascript"> function mInput() { let num = ''; let input = document.getElementById("input"); let input_txt = input.value; document.getElementById('html_con').innerText = input_txt; input_txt = input_txt.replace(/\r/gi, ""); input_txt = input_txt.split("\n"); n = input_txt.length; for (let i = 1; i <= n; i++) { num += i + "\n"; } document.getElementById("left_txt").value = num; } function triggerScroll() { document.getElementById("left_txt").scrollTop = document.getElementById("input").scrollTop; } function getSel(){ let input = document.getElementById("input"); let text = input.value; let leftText = text.substr(0,input.selectionStart) console.log(leftText.split("\n").length)//行 console.log(leftText.split("\n")[leftText.split("\n").length - 1].length)//列 } </script> </head> <body> <div id="l_div"> <div id="left_div"> <textarea id="left_txt" disabled>1</textarea> </div> <textarea id="input" wrap="off" oninput="mInput()" onclick="getSel()" onscroll="triggerScroll()"></textarea> </div> <div id="html_con"></div> </body> </html>

效果样式：