Задать вопрос

desgleb

Лайки

  • Как бы выглядело такое автозаполнение инпута на чистом JS?

    Xuxicheta
    @Xuxicheta
    инженер
    Можно вообще без js
    <input list="aaaa">
<datalist id="aaaa">
  <option value="Текст1"></option>
  <option value="Текст2"></option>
</datalist>
    Ответ написан
    Комментировать
    Комментировать

  • Как удалить файл из числа прикрепленных?

    @Nawot
    Можно скопировать все файлы кроме удаленного из input в DataTransfer, а потом обратно в input
    Вот код из моего проекта:
    const loaders = document.querySelectorAll('.file-loader')

loaders.forEach((loader) =>
{
    const dropBox = loader.querySelector('.file-loader__input-wrapper')
    const input = loader.querySelector('.file-loader__input')
    const files = loader.querySelector('.file-loader__files')


    const refreshFiles = () =>
    {
        // Clear files
        files.innerHTML = ''

        // Make all files
        Array.from(input.files).forEach(file =>
        {
            const el = document.createElement('li')
            el.classList.add('file-lader__file')
            el.classList.add('file-loader-file')

            const elName = document.createElement('span')
            const elDelete = document.createElement('span')

            elName.classList.add('file-loader-file__name')
            elDelete.classList.add('file-loader-file__delete')
            elDelete.addEventListener('click', e =>
            {
                deleteFile(e.target.parentNode)
            })

            elName.textContent = file.name
            elDelete.textContent = 'Удалить файл'

            el.appendChild(elName)
            el.appendChild(elDelete)

            files.appendChild(el)
        })
    }

    const deleteFile = (element) =>
    {
        let dt = new DataTransfer()
        const index = getChildElementIndex(element)

        // Copy all besides deleted
        for(let i=0; i<=input.files.length-1; i++)
            if(i !== index)
                dt.items.add(input.files[i])

        // Replace
        input.files = dt.files

        refreshFiles()
    }

    function getChildElementIndex(element)
    {
        return Array.prototype.indexOf.call(element.parentNode.children, element)
    }


    dropBox.addEventListener('drop', e =>
    {
        input.files = e.dataTransfer.files

        refreshFiles()
        e.preventDefault()
    })
    input.addEventListener('change', e =>
    {
        refreshFiles()
        e.preventDefault()
    })
})
    Ответ написан
    Комментировать
    Комментировать

  • Как программно вставить файлы в input?

    zkrvndm
    @zkrvndm Автор вопроса
    Архитектор решений
    Лайфхак для создания коллекции файлов FileList:
    var info = 'Какой-нибудь текст';

var dt  = new DataTransfer();
dt.items.add(new File([info], 'primer.txt', {type: 'text/plain'}));
var file_list = dt.files;

console.log('Коллекция файлов создана:');
console.dir(file_list);

// Вставим созданную коллекцию в реальное поле:
document.querySelector('input[type="file"]').files = file_list;

    В переменную info вместо текста, можно положить в том числе и Blob - это особенность функции new File() которая первым параметром может принять как массив из текстов, так и массив из Blob.

    Фактически лайфхак выше позволяет нам JavaScript-ом скачать любой какой угодно файл со своего сайта и вставить его абсолютно в любое поле <input type="file"> - что просто архиполезно для браузерных ботов.

    Также способ выше можно применить для редактирования уже выбранных пользователем файлов. Например, если надо из поля выбора файлов убрать какие-то определенные файлы и при этом сделать не фиктивно, а реально.

    Огромное спасибо пользователю Mmx Symfony, который нарыл это решение где-то в недрах иностранных сайтов. Сам я, в свое время сколько не искал, везде был ответ, что это невозможно, а оказалось, что нихрена подобного =)
    Ответ написан
    3 комментария
    3 комментария

  • Не понимаю оператора return в JS?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Смотрите, как вызывать/использовать эту функцию.

    var a = getRectArea( 3, 4 );
    Тут в переменной a окажется значение, которое функция вернула – то, что после "return" в ней оказалось. В вашем примере это 3 * 4, т.е. число 12. Ура, в переменной a теперь лежит число 12

    И как только выполнился return – всё, дальше функция уже не выполняется, это был выход.
    function test() {
  return;
  alert('Привет мир!'); // эта строка никогда не выполнится
}
    Ответ написан
    1 комментарий
    1 комментарий