Svelte — input, enter, ios

Admin Svelte

Пример как отправлять данные в формах input через кнопку Готово или через Enter на iOS устройствах.

Наш html код:

<div class="table table-add">
    <form on:submit={handleSubmit} on:change={addNewTaskOnChange} on:keypress={addNewTaskOnKeypress}>
        <label>
            <input class="add-done" placeholder="Напишите название задачи" bind:value={json.name}>
            <input class="add-category" placeholder="Перечислите категории через запятую" bind:value={json.categories}>
        </label>
        <button class="none"></button>
    </form>
</div>

Выключаем обработку события на submit идущую по-умолчанию:

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

На svelte это можно сделать просто навесив preventDefault таким образом:

on:submit|preventDefault={addNewTask}

Но в текущей задаче это не подойдет.

Функция добавления новой задачи:

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

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

    // Очищаем поле ввода
    json = {name: '', categories: ''}
}

Теперь включаем занесение задач по Enter:

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

    addNewTask();
}

А для систем на iOS мы делаем такую вот штуковину:

// Нужно для ios, для сохранения по кнопке Готово
function addNewTaskOnChange(e) {
    // Но только в том случае, если заполнены категории тоже,
    // иначе будут неожиданные добавления задач
    if (json.categories === '' || e.returnValue !== true) {
        return;
    }

    addNewTask();
}

Почему так? Потому что событие on:keypress на iOS работать не будет при отключенном preventDefault, поэтому мы вешаем обработчик на любое изменение данных в полях. А затем ставим стопы — на изменение например первого поля, чтобы обязательно было заполнено и второе. И только в этом случае отправятся изменения. Можно дополнить проверки на другие поля.

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — input, enter, ios"