我有一个需要输入字段的应用程序。用户可以在输入字段上拖放一段文本(链接),但不能在字段内键入任何内容。我怎样才能做到这一点?
我尝试在输入中使用只读和禁用属性,但这完全不允许在字段中输入任何类型的输入。
请建议一些方法来实现这一目标。我想要一个可以像输入字段一样工作的框,允许在其中拖放文本,但不允许用户键入任何内容。我正在附上一张照片,上面显示了我希望用作输入框的框。
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>
答案 0 :(得分:0)
您需要将跟踪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);
}
&#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;