added enter send key to messages input

This commit is contained in:
Samuel Andert 2023-07-22 11:21:02 +02:00
parent 77a183a7c2
commit c84615d6bf

View File

@ -20,6 +20,13 @@
function handleClear() { function handleClear() {
clearMessages(); // Call the clearMessages function to clear all messages. clearMessages(); // Call the clearMessages function to clear all messages.
} }
function handleKeyDown(event) {
if (event.key === 'Enter') {
handleSend();
event.preventDefault(); // Prevents a newline being added to the input field
}
}
</script> </script>
<footer class="bg-white p-4 flex justify-end"> <footer class="bg-white p-4 flex justify-end">
@ -28,6 +35,7 @@
class="flex-grow border rounded px-3 py-2 mr-2" class="flex-grow border rounded px-3 py-2 mr-2"
placeholder="Type your message..." placeholder="Type your message..."
bind:value={newMessageText} bind:value={newMessageText}
on:keydown={handleKeyDown}
/> />
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded" on:click={handleSend}> <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded" on:click={handleSend}>
Send Message Send Message