Livewire实现Enter提交表单、Shift+Enter换行的问题求助

问题1：原生JS函数未定义的解决 #

你的代码存在两个核心问题：

• 函数名不匹配：onkeydown="handleKeyDown(event)" 调用的是handleKeyDown，但脚本里定义的是handleKeyPress
• Livewire的@script块内函数默认处于组件作用域，全局无法直接访问

修正后的代码 #

<form class="new-chat-form border-gradient" wire:submit.prevent="sendMessage" enctype="multipart/form-data">
    <textarea wire:model="inputMessage" id="message" rows="1" placeholder="Send a message..."
        onkeydown="handleKeyDown(event)"></textarea>
    <button type="submit" class="form-icon icon-send sendButton">
        <i class="feather-send"></i>
    </button>
</form>
<p class="b3 small-text">{{ config('app.name') }} can make mistakes. Consider checking important information.</p>

@script
<script>
    // 将函数挂载到window对象，确保全局可访问
    window.handleKeyDown = function(event) {
        const textarea = event.target;
        // Enter无Shift：提交表单
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            @this.sendMessage();
        }
        // Enter加Shift：添加换行并保持光标位置
        else if (event.key === 'Enter' && event.shiftKey) {
            event.preventDefault();
            const cursorPosition = textarea.selectionStart;
            textarea.value = textarea.value.slice(0, cursorPosition) + '\n' + textarea.value.slice(cursorPosition);
            textarea.selectionStart = textarea.selectionEnd = cursorPosition + 1;
            // 更新Livewire绑定的inputMessage值
            @this.set('inputMessage', textarea.value);
        }
    }
</script>
@endscript

问题2：按键修饰符触发多个事件的解决 #

wire:keydown.enter会匹配所有按下Enter的场景（包括Shift+Enter），导致两个事件同时触发。可以通过以下方式解决：

修正后的按键绑定方案 #

在组件PHP代码中新增逻辑，判断按键状态：

public function sendMessage()
{
    // 若按下Shift键，则执行换行逻辑
    if (request()->headers->get('X-Livewire-Event-Params') && str_contains(request()->headers->get('X-Livewire-Event-Params'), 'shiftKey:true')) {
        $this->addNewLine();
        return;
    }
    // 原有的消息发送逻辑
}

public function addNewLine()
{
    $this->inputMessage .= "\n";
}

前端修改为单个按键绑定，传递Shift状态：

<textarea wire:model="inputMessage" id="message" rows="1" placeholder="Send a message..."
    wire:keydown.enter="sendMessage"
    wire:keydown.shift.enter="addNewLine"></textarea>

最终推荐方案 #

优先采用问题1修正后的原生JS方案，它直接在前端处理按键逻辑，避免了Livewire事件绑定的冲突，同时能精确控制光标位置，用户体验更流畅。

内容的提问来源于stack exchange，提问作者Sameed Ediz