Пример как отправлять данные в формах input через кнопку Готово или через Enter на iOS устройствах.
Наш html код:
<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 идущую по-умолчанию:
e.preventDefault()
}
На svelte это можно сделать просто навесив preventDefault таким образом:
Но в текущей задаче это не подойдет.
Функция добавления новой задачи:
let json = {name: '', categories: ''};
function addNewTask() {
postFetch('add-new-done/', json).then((r) => {
tasks = r;
});
// Очищаем поле ввода
json = {name: '', categories: ''}
}
Теперь включаем занесение задач по Enter:
if (e.key !== 'Enter') {
return;
}
addNewTask();
}
А для систем на iOS мы делаем такую вот штуковину:
function addNewTaskOnChange(e) {
// Но только в том случае, если заполнены категории тоже,
// иначе будут неожиданные добавления задач
if (json.categories === '' || e.returnValue !== true) {
return;
}
addNewTask();
}
Почему так? Потому что событие on:keypress на iOS работать не будет при отключенном preventDefault, поэтому мы вешаем обработчик на любое изменение данных в полях. А затем ставим стопы — на изменение например первого поля, чтобы обязательно было заполнено и второе. И только в этом случае отправятся изменения. Можно дополнить проверки на другие поля.
