Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Obsługa wklejania do pola tekstowego – jQuery

4

Dziś będzie krótko – zetknąłem się ostatnio z tytułowym problemem (w ramach prac nad moim projektem „after working hours” – pisałem o tym poprzednio), postanowiłem więc na szybko napisać mały tutorialik na czym polega obsługa wklejania do pola tekstowego za pomocą jQuery

Problem

Na początek krótkie wprowadzenie. Oczekiwanym przeze mnie zachowaniem było wyświetlenie formatki w stylu pop-up, w momencie gdy użytkownik wklei coś do pola tekstowego (w celu wybrania dodatkowych opcji dotyczących tego co wkleja). Chwila googlowania jak obsłużyć takie zdarzenie i piszemy pierwszą wersję kodu (na potrzeby przykładu kod jest oczywiście znacznie uproszczony):

$('input').on('paste', function () {
    alert('test');
});

Nie ma tutaj myślę niczego niezwykłego… Wklejamy coś do pola ‚input’, a naszym oczom ukazuje się komunikat „test”. Jeśli jednak spróbowalibyśmy zamiast tego, wyświetlić zawartość pola tekstowego:

$('input').on('paste', function () {
    alert($(this).val());
});

Obsługa wklejania – rozwiązanie

Okazuje się, że wartość zwracana przez funkcję ‚val()’ jest pusta! Chwila szperania i okazuje się, że zdarzenie ‚paste’ nie jest natychmiastowe – wklejanie trwa kilka milisekund dlatego zanim dobierzemy się do wklejonej wartości, trzeba chwilę poczekać… Oto jak można to zrobić:

$('input').on('paste', function () {
    var $input = $(this);
    setTimeout(function () {
        alert($input.val());
    }, 150);
});

W powyższym przykładzie, przy użyciu funkcji ‚setTimeout’ nakazujemy wykonać zadanie wyświetlenia wartości „inputa” po odczekaniu 150 milisekund. W tym miejscu możemy dodać jeszcze jedno usprawnienie – zamiast podawać konkretną wartość czasu (tutaj właśnie 150 milisekund), możemy podać wartość 0. Spowoduje to umieszczenie funkcji przekazanej jako parametr funkcji ‚setTimeout’ na końcu stosu wywołań, dzięki czemu zostanie ona wywołana, kiedy pole tekstowe będzie już wypełnione oczekiwaną wartością.

To tyle na dziś, kod pokazany jak zwykle dostępny jest do przetestowania w narzędziu jsfiddle.

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!