Only allow to drag and drop text and not typing in html input field

Question

I have an application that requires an input field. The user can drag and drop a piece of text(a link) on the input field but not type in anything inside the field. How can I achieve this?

I tried using read-only and disabled attributes with the input but this totally does not allow there to be any kind of input to be entered in the field.

Please suggest some way to achieve this. I want a box which can act like an input field and allow text to be dragged and dropped in it, but not allow the user to type in anything. I am attaching a picture with this, which shows the box that i wish to use as the input box.

The html is coded as follows:

<p>
    <label id="lbl_market" for="market">Select Your Country: </label>
    <select id="market">
        <option id="SelectMarket" class="market_option" selected disabled>Select Market (Domain)</option>
    </select>
</p>
<p>
    <label id="lbl_tr_id" for="tr_id">Enter Your Tracking ID: </label>
    <input id="tr_id" type="text" name="tr_id" placeholder="Tracking ID">
</p>
<p>
    <div id="lbl_link">Drop link here: </div>
    <input readonly id="link" type="link" name="link" value="+">
</p>

Answer 1

You need to drag the text of the tracking ID to the box. You can do it with some css and javascript. Fill the textbox and select the text. Once selected drag the selection into your box.

 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.value); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var texteSelectionne = document.createTextNode(data); ev.target.appendChild(texteSelectionne); } 

 #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } 

 <p> <label id="lbl_market" for="market">Select Your Country: </label> <select id="market"> <option id="SelectMarket" class="market_option" selected=selected disabled=disabled>Select Market (Domain)</option> </select> </p> <p> <label id="lbl_tr_id" for="tr_id">Enter Your Tracking ID: </label> <input id="tr_id" type="text" name="tr_id" placeholder="Tracking ID" draggable="true" ondragstart="drag(event)"/> </p> <p> <label>Drop link here: </label> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </p>