Détection de glisser déposer dans la zone de texte HTML?

Question

J'ai un champ de recherche normal sur ma page Web. Il est rempli de texte: Search this website

Ce texte est supprimé lorsque vous cliquez dans la zone pour taper votre requête de recherche:

onfocus="if(this.value=='Search this website') { this.value=''}; 

Mais comment puis-je détecter quand quelqu'un tire texte de la page sur la zone de recherche , comme je le fais souvent moi-même? onfocus n'est pas déclenché et le texte précédent reste.

Answer 1

Avez-vous essayé d'utiliser l'événement onchange?

BTW, il ya un petit plugin jQuery appelé jquery-defaultvalue qui gère tous les cas d'angle pour vous. Si vous utilisez jQuery de toute façon, cela vaut le coup d'oeil.

Answer 2

Voir - http://www.simplecoding.org/drag-drop-s-ispolzovaniem-html5.html, mais la page sur la langue russe (Google Translate aiderait).

Answer 3

Vous devez utiliser l'événement ondrop, qui ne fera que le feu si les ondragenter et ondragover événements sont annulés. Il s'avère que c'est un peu plus compliqué car le comportement est différent dans Firefox que IE, Safari et Chrome.

(function() { 
    var inp = document.getElementById("test"), 
     chg = false; 

    inp.ondragover = inp.ondragenter = function() { 
     chg = inp.value == "Drop here"; 
     return false; 
    } 
    inp.ondrop = function (evt) { 
     evt = evt || event; 

     if (chg) { 
      this.value = evt.dataTransfer.getData("text") 
         || evt.dataTransfer.getData("text/plain"); 
      return false; 
     } 
    } 
})(); 

Example - Firefox 3+, IE5 +, Chrome et Safari. Comme je peux le dire, Opera ne supporte pas l'événement. Au moins, vous pouvez le faire fonctionner pour 95% de vos visiteurs.

Drag Operations - MDC