submitOnCtrlEnter

submitOnCtrlEnter(fn) is a use:ref convenience that calls fn when the user presses Ctrl+Enter (Cmd+Enter on Mac) on the element — the common "send on Ctrl+Enter" affordance for textareas. It is a thin wrapper over shortcut('mod+enter', fn), so preventDefault is applied when the chord matches. Compose it with shortcut for other chords. Part of pota/use/keyboard.

Arguments

Argument Type Description
fn (e: KeyboardEvent, node: Element) => void Handler invoked on Ctrl/Cmd+Enter.

Returns: a ref function (node: Element) => void for use:ref.

Examples

Send on Ctrl/Cmd+Enter

Submit a textarea's draft with the keyboard shortcut instead of clicking a button.

import { render, signal } from 'pota'
import { submitOnCtrlEnter } from 'pota/use/keyboard'

function App() {
	const draft = signal('')
	const sent = signal('')

	return (
		<div>
			<textarea
				rows="4"
				prop:value={draft.read}
				on:input={e => draft.write(e.currentTarget.value)}
				use:ref={submitOnCtrlEnter(() => {
					sent.write(draft.read())
					draft.write('')
				})}
			/>
			<p>
				press <kbd>Ctrl/Cmd</kbd>+<kbd>Enter</kbd> to send
			</p>
			<p>
				last sent: <mark>{sent.read}</mark>
			</p>
		</div>
	)
}

render(App)