Catch image in text box in javascript

Question

I want to allow the user to drag and drop an image from a web page into my web application, and then store and use the image URL in a different location of the application. Therefore, I am creating an input field as a drag target.

But since this allows you to drop any dragged web object (like links), I need to do some error checking. I could add a button there, but it would be better if the drop were automatically detected.

So the question is, are there any event handlers, mostly supported in IE7 and FF3, that fire when the image is deleted? Does it just raise a change event in the field?

Answer 1

No, as far as I know, there are no events that will fire as soon as you make a fall.

Here a solution is possible:

var input = document.getElementById("input");
var lastVal = input.value;

setInterval(function() {
  if (input.value !== lastVal) {
    if (input.value) {
      if ( /\.(jpe?g|gif|bmp|png)(\?.*)?$/.test(input.value) ){
        alert('It\ an image URL!!!');
      } else {
        alert('Not an image URL...');
      }
    }
    lastVal = input.value;
  }
}, 100);

Demo here: http://jsbin.com/izake

Note. It seems that some browsers (IE) do not allow you to delete items in fields similar to other browsers. It might be worth creating it from scratch - where everything on the page is being dragged ...

Answer 2

You will not receive a standard event directly after a drag (only after clicking outside the text field), but maybe you can use some kind of DragListener ...

URL-, (JPG, PNG, GIF...) , URL "file:" - , , .