今天，济南网站建设小编为大家带来一个简单的JavaScript编程小案例，这个JavaScript经典案例主要为大家介绍了，光标停在文本框文字的最后一位相关内容，有兴趣的朋友可以过来参考一下。
关键代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>JavaScript经典小案例——光标定位到文本末尾</title>
<style>
.box{margin: 50px;}
input,textarea{
padding: 10px;
width: 300px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea{height: 100px;margin-top: 15px;}
</style>
</head>
<body>
<div class="box">
<input type="text" id="inputTxt" value="预设文本内容">
<textarea id="textArea">多行文本测试内容</textarea>
</div>
<script>
// 单行输入框光标置尾
const inputTxt = document.getElementById('inputTxt');
inputTxt.onclick = function(){
let len = this.value.length;
// 设置光标起始、结束位置都为文本长度
this.setSelectionRange(len, len);
}
// 多行文本域光标置尾
const textArea = document.getElementById('textArea');
textArea.onclick = function(){
let len = this.value.length;
this.setSelectionRange(len, len);
}
</script>
</body>
</html>
评论