jQuery: comment mettre à jour un div lors du collage (comme Facebook)

Question

J'ai un champ de saisie où un utilisateur peut coller un lien. Je voudrais avoir un div apparaître dès que l'utilisateur ajoute une URL au champ de saisie.

Jusqu'à présent, j'ai utilisé .blur et .onfocus, mais la div n'apparaît qu'une fois que je clique en dehors du champ de saisie après avoir collé l'URL. C'est comme sur Facebook: dès que vous collez un lien, il va charger une boîte sans recharger la page.

Answer 1

.blur est l'opposé de .focus - il se déclenche lorsque le champ spécifié perd le focus. Vous avez besoin d'utiliser quelque chose qui déclenche chaque fois qu'une touche est enfoncée, comme .keyup

Notez que .change ne fonctionnera pas - elle aussi ne se déclenche lorsque le champ perd le focus

Answer 2

Je scanner le contenu du textarea sur keydown et utilisez une regex pour rechercher un "http: //"

Answer 3

Puisqu'ils peuvent coller une URL via la souris ou via le clavier, vous pouvez essayer de lier à la fois le clavier et le mousquet, et vérifier si une URL valide est présente. Cependant, vous pourriez avoir des ennuis s'ils tapent un caractère d'URL par caractère - il pourrait être une URL valide même avant qu'ils soient finis réellement.

Une autre chose à essayer, alors, serait de lier à mousemove pour le document entier, mais arrêter la propagation de l'événement dans la boîte de saisie. De cette façon, vous déclenchez dès qu'ils s'éloignent de la boîte, plutôt que de devoir cliquer en dehors de la boîte.