(Edited on 25 day ago)
可以获取光标的 button 按钮可以将指定内容插入到文本域的任意光标点 @大A
<!DOCTYPE html>
<html lang="en">
<style>
#message{width: 500px;height: 200px;}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>添加按钮示例</title>
</head>
<body>
<textarea id="message" placeholder="在这里输入内容..."></textarea>
<br><br>
<button type="button" class="btn" onclick="insertContentAtCursor('## \n')">插入标题</button>
<button type="button" class="btn" onclick="insertContentAtCursor('**加粗** \n')">插入加粗标记</button>
<script>
function insertContentAtCursor(content) {
var textarea = document.getElementById('message');
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + content + textarea.value.substring(end);
// 将光标固定在插入内容之后
textarea.setSelectionRange(start + content.length, start + content.length);
textarea.focus(); // 确保光标聚焦在文本区域
}
</script>
</body>
</html>
<html lang="en">
<style>
#message{width: 500px;height: 200px;}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>添加按钮示例</title>
</head>
<body>
<textarea id="message" placeholder="在这里输入内容..."></textarea>
<br><br>
<button type="button" class="btn" onclick="insertContentAtCursor('## \n')">插入标题</button>
<button type="button" class="btn" onclick="insertContentAtCursor('**加粗** \n')">插入加粗标记</button>
<script>
function insertContentAtCursor(content) {
var textarea = document.getElementById('message');
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + content + textarea.value.substring(end);
// 将光标固定在插入内容之后
textarea.setSelectionRange(start + content.length, start + content.length);
textarea.focus(); // 确保光标聚焦在文本区域
}
</script>
</body>
</html>
https://www.0313.co/post/SMogSWO9