只允许拖放文本而不输入html输入字段

时间:2017-11-27 10:05:22

标签: javascript jquery html css

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

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

请建议一些方法来实现这一目标。我想要一个可以像输入字段一样工作的框,允许在其中拖放文本,但不允许用户键入任何内容。我正在附上一张照片,上面显示了我希望用作输入框的框。

enter image description here

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>

1 个答案:

答案 0 :(得分:0)

您需要将跟踪ID的文本拖到框中。你可以用一些css和javascript来做到这一点。填写文本框并选择文本。选择后,将选择拖到您的框中。

&#13;
&#13;
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);
}
&#13;
#div1 {
        width: 350px;
        height: 70px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
&#13;
<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>
&#13;
&#13;
&#13;