LunaTalk HTML 内联脚本——onclick 按钮交互详解

LunaTalk 的脚本限制

帮助文档明确说明：

写法	支持吗
独立 `<script>...</script>` 块	❌ 不支持
`<button onclick="...">` 内联事件脚本	✅ 支持
`<a href="javascript:...">`	❌ 通常不支持
`<div onmouseover="...">`	❌ 帮助文档未提及支持

所以只能用内联事件脚本，最常见就是按钮的 onclick。

按钮 onclick 的核心模板

帮助文档提供的标准模板，直接复制粘贴就能用：

<button onclick="const textarea=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(textarea){textarea.value='选项文本';textarea.dispatchEvent(new Event('input',{bubbles:true}))}else{alert('没找到 textarea 哦')}">按钮显示文字</button>

模板逐行拆解

代码	作用
`document.querySelector('#lunatalk-input textarea.uni-textarea-textarea')`	找到 LunaTalk 聊天输入框（固定选择器）
`textarea.value='选项文本'`	把按钮里的选项文字填入输入框
`textarea.dispatchEvent(new Event('input',{bubbles:true}))`	触发输入事件，让 LunaTalk 识别到输入变化
`alert('没找到...')`	如果没找到输入框（比如在错误页面），弹个提示

你只需要改一处

把 textarea.value='选项文本' 里的 '选项文本' 替换成你想要玩家填入的实际内容。其他全部原样不动——不要改选择器、不要删 dispatchEvent、不要改结构。

多按钮示例

<button onclick="const ta=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(ta){ta.value=='修炼功法';ta.dispatchEvent(new Event('input',{bubbles:true}))}">修炼功法</button>
<button onclick="const ta=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(ta){ta.value=='下山历练';ta.dispatchEvent(new Event('input',{bubbles:true}))}">下山历练</button>
<button onclick="const ta=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(ta){ta.value=='在修炼室打坐';ta.dispatchEvent(new Event('input',{bubbles:true}))}">打坐休息</button>
<button onclick="const ta=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(ta){ta.value=='去找艾莉娅';ta.dispatchEvent(new Event('input',{bubbles:true}))}">去找艾莉娅</button>

按钮样式美化

简洁风格（LunaTalk 推荐）

<button style="background-color: lightblue; color: darkblue; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;" onclick="...">按钮文字</button>

分组颜色区分（多类型选项）

<button style="background-color: #90EE90; color: darkgreen; border: none; padding: 6px 12px;" onclick="...">✓ 接受任务</button>
<button style="background-color: #FFB6C1; color: darkred; border: none; padding: 6px 12px;" onclick="...">✗ 拒绝任务</button>
<button style="background-color: #FFFACD; color: darkgold; border: none; padding: 6px 12px;" onclick="...">? 询问详情</button>

三种颜色分别对应「确定/拒绝/询问」三种行动类型，玩家一眼就能分辨。

常见问题

问题一：点击按钮没反应

可能原因	排查方法
选择器写错了	检查 onclick 里的选择器是不是 `#lunatalk-input textarea.uni-textarea-textarea`
`textarea.value=` 后面的引号没闭合	检查整段 JavaScript 有没有引号问题
被浏览器/渲染器的安全策略拦截	尝试简化 onclick 内容，去掉 alert 部分
你不在聊天房间页面	必须在聊天房间里点按钮，其他页面没输入框

问题二：AI 生成的按钮 JavaScript 写错了

AI 自己写内联脚本很容易出错。最稳的办法是：

在角色卡格式要求里完整贴上标准模板
告诉 AI："只修改 textarea.value='xxx' 里的 xxx，其他不动"
测试几轮看 AI 有没有老老实实照着来

问题三：按钮太宽或太挤

调整 padding 属性：

太窄：加大 padding，比如 padding: 10px 20px
太宽：减小 padding，比如 padding: 4px 8px
想让多个按钮等宽：给按钮加 width: 100px 固定宽度

其他能用的内联事件

帮助文档没有完整列出支持哪些内联事件，但除了 onclick，以下几种大概率也支持：

事件	触发时机	可能的用途
onmouseover	鼠标悬停	悬停时改变按钮样式
onmouseout	鼠标移出	悬停后恢复样式
onfocus	获得焦点	键盘导航时高亮

但实际角色卡里只用 onclick 就够了——这是唯一可靠的交互方式。其他事件建议在熟悉 LunaTalk 后再尝试。