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

青衫旧路

已于 2022-09-05 12:26:00 修改

阅读量3.5k

点赞数

分类专栏： CSS 前端 JavaScript 文章标签： css 前端 javascript

于 2022-01-30 11:15:54 首次发布

本文链接：https://blog.csdn.net/weixin_45948996/article/details/122751163

版权

前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

<!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>

效果样式：
在这里插入图片描述