javascript - 只允许拖放文本而不是在 html 输入字段中键入

Question

我有一个需要输入字段的应用程序。用户可以在输入字段上拖放一段文本(链接)，但不能在字段内输入任何内容。我怎样才能做到这一点？

我尝试对输入使用只读和禁用属性，但这完全不允许在该字段中输入任何类型的输入。

请提出一些实现此目的的方法。我想要一个可以像输入字段一样工作并允许在其中拖放文本但不允许用户输入任何内容的框。我附上了一张图片，它显示了我希望用作输入框的框。

html编码如下:

<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

您需要将跟踪 ID 的文本拖到框中。您可以使用一些 css 和 javascript 来完成。填写文本框并选择文本。选择后，将选择拖入您的框中。

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>