Laravel - how to do form submit on pressing enter and add new line on shift+enter in livewire

SameedEdiz
November 25, 2024
48 views
0 votes
2 Answers

my blade file

<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)" id="search-form"></textarea>
                <button type="submit" class="form-icon icon-send sendButton">
                    <i class="feather-send"></i>
                </button>
            </div>
        </form>
        <p class="b3 small-text">{{ config('app.name') }} can make mistakes. Consider checking important information.
        </p>
    </div>
</div>

@script
    <script>
        function handleKeyPress(event) {
            const textarea = event.target;
            // Check if Enter key is pressed without Shift
            if (event.key === 'Enter' && event.shiftKey === false) {
                event.preventDefault();
                @this.call('sendMessage');
            }
            // Check if Enter key is pressed with Shift
            else if (event.key === 'Enter' && event.shiftKey === true) {
                event.preventDefault();
                const cursorPosition = textarea.selectionStart;

                textarea.value =
                    textarea.value.slice(0, cursorPosition) +
                    'n' +
                    textarea.value.slice(cursorPosition);

                textarea.selectionStart = textarea.selectionEnd = cursorPosition + 1;
                @this.set('inputMessage', textarea.value);
            }
        }
    </script>
@endscript

i have tried this method but it says in console undefined function

and then i found livewire key modifiers , i tried them also

<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..."
                wire:keydown.enter="sendMessage" wire:keydown.shift.enter="addNewLine" id="search-form"></textarea>
                <button type="submit" class="form-icon icon-send sendButton">
                    <i class="feather-send"></i>
                </button>
            </div>
        </form>

but while pressing enter form submits but when i click shift+enter then both function runs, sendMessage and addNewLine

how i can do form submit and add new line please help im stucked with this for a day

Answers

wire:keydown.shift.enter event isn’t exclusive. It still triggers wire:keydown.enter since the key event contains Enter.
you can make javascript batter to perform your logic

blade

<form class="new-chat-form border-gradient" wire:submit.prevent="sendMessage" enctype="multipart/form-data">
    <textarea wire:model.defer="inputMessage" 
              id="message" 
              rows="1" 
              placeholder="Send a message..."
              onkeydown="handleKeyPress(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>

JavaScript

@script
<script>
    function handleKeyPress(event) {
        const textarea = event.target;

        // Check if Enter is pressed without Shift (Submit Message)
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault(); // Prevent default behavior
            @this.call('sendMessage'); // Call the Livewire method
        }

        // Check if Enter is pressed with Shift (Add New Line)
        if (event.key === 'Enter' && event.shiftKey) {
            event.preventDefault(); // Prevent default behavior
            const cursorPosition = textarea.selectionStart;

            // Insert a new line at the cursor position
            textarea.value = textarea.value.slice(0, cursorPosition) + 'n' + textarea.value.slice(cursorPosition);

            // Update the cursor position and Livewire property
            textarea.selectionStart = textarea.selectionEnd = cursorPosition + 1;
            @this.set('inputMessage', textarea.value); // Sync with Livewire property
        }
    }
</script>
@endscrip

Press Enter without Shift. The form should submit, and
sendMessage should be called.
Press Shift + Enter. A new line should be added in the textarea without submitting the form.

- TUPKAP
- November 25, 2024 at 12:44 am
- 0 votes
0
This is a very simple soluton using Alpine:
```
<form class="new-chat-form border-gradient"
      wire:submit.prevent="sendMessage"
>
    <textarea wire:model="inputMessage"
              rows="10"
              placeholder="Send a message..."
              @keydown.enter="!$event.shiftKey && ($event.preventDefault(), $wire.sendMessage())"
    ></textarea>

    <div>
        <button type="submit"
                class="form-icon icon-send sendButton"
        >
            [Submit]
        </button>
    </div>

</form>
```
When the shift key is pressed togheter with the enter key a newline is inserted at the current position as expected, otherwise the enter key causes a call to the backend sendMessage() method via the $wire object
Login or Signup to reply.