Images can be dragged and drop in textbox in jqgrid

In my rails application ,iam using jqgrid to enter data in rows.there is a description box which allows certain no of characters.The problem here is i can drag and drop images and urls which the description box accepts.How can i prevent it. here is the short code i have taken out from the main after some edit..

  $(document).ready(function() {

     colNamesData = [ 'Description', 'Hours']
     colModelHash = [ 
     {name:'description',index:'description', width:130,sorttype:"text", editable:true, edittype:"textarea", editoptions: {rows:"5",cols:"25",maxlength:"255"}, stype:'text'},
     {name:'hours',index:'hours', width:130, align:'center',editable:true, edittype:"select",editoptions:{value:"<%= hours_options %>"}, search:true, stype:'text'}
                      },
          ]
   $("#data_table").jqGrid({
      datatype: "local", 
      height: "auto",
      autowidth: true,
      ignoreCase: true,
      colNames: colNamesData, 
      colModel: colModelHash,
      page开发者_如何学编程r: '#pager',
      rowNum:10,
      rowList:[10,25,50,100],
      sortname: 'hours',
      sortorder: 'desc',
      viewrecords: true,
      editurl:"/data_call.json", 
      caption: 'My info',

     },
      data:<%= raw @data_jqgrid_date.to_json %>
   });

   jQuery("#data_table").jqGrid('navGrid','#pager',{del:false,add:true,edit:false},{}, {}, {});  
   var details =  <%= raw @details.to_json %>

---

You can bind 'drop' event handler to the 'description' column having edittype:"textarea". To do this you can include dataEvents which look like

editoptions: {
   dataEvents: [
       {
            type: 'drop',
            fn: function(e) {
                console.log('drop');
                if (e.originalEvent !== undefined &&
                    e.originalEvent.dataTransfer !== undefined &&
                    e.originalEvent.dataTransfer.getData) {

                    console.log("URL: "+e.originalEvent.dataTransfer.getData('URL'));
                    console.log("Text: "+e.originalEvent.dataTransfer.getData('Text'));
                    e.preventDefault();
                }
            }
       }
   ]
}

in the code the URL and the Text dropped in the control will be displayed on the console and the dropping will be prevented. You can prevent the dropping depend on the data returned by dataTransfer.getData('URL') and dataTransfer.getData('Text').

---

In my view you can have a JavaScript method. Just bind the change method of that text box with the method. Check the value, if it contains any invalid character then reset it to balnk('') and return false.