Svelte – input, enter, ios

An example of how to submit data in forms input through the button Done or via Enter to iOS devices.

Our html code:

<div class=“table table-add”>
<form on:submit={handleSubmit} on:change={addNewTaskOnChange} on:keypress={addNewTaskOnKeypress}>
<label>
<input class=“add-done” placeholder=“Write the name of the task” bind:value={json.name}>
<input class=“add-category” placeholder=“List categories separated by commas” bind:value={json.categories}>
label>
<button class=“none”> button>
form>
div>

Turn off the default processing of the submit event:

function handleSubmit(e) {
e.preventDefault()
}

On svelte, this can be done simply by hanging preventDefault in this way:

on:submit|preventDefault={addNewTask}

But this will not work for the current task.

New task adding function:

export let tasks;
let json = {name: , categories: };

function addNewTask() {
postFetch(‘add-new-done /’, json)then((r) => {
tasks = r;
});

// Clear the input field
json = {name: , categories: }
}

Now we turn on the entry of tasks by Enter:

function addNewTaskOnKeypress(e) {
if (e.key ! == ‘Enter’) {
return;
}

addNewTask();
}

And for iOS systems, we do this thing:

// Needed for ios, to save by clicking the Finish button
function addNewTaskOnChange(e) {
// But only if the categories are filled too,
// otherwise there will be unexpected task additions
if (json.categories === || e.returnValue ! == true) {
return;
}

addNewTask();
}

Why is that? Because on: keypress event on iOS will not work when disabled preventDefault, so we hang up the handler for any change in the data in the fields. And then we put stops – for example, to change the first field, so that the second must be filled in as well. And only in this case will the changes be sent. You can supplement checks for other fields.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *