Question

这是我写的一些javascript的骨头，没有多少经验。我认为错误可能是我似乎无法找到的显而易见的事情。过程是用户可以将元素移动到设计区域;然后使用ID＃s的元素通过电子邮件发送设计规范。问题是，如果用户决定直接编辑表单字段，则自动插入文本的脚本部分将停止工作。这是＆＃34;返回;＆＃34;缺少的行动？或者＆＃34;焦点（）＆＃34;？我已经尝试了一些没有用的东西。我会在此处上传这个小文件：http://professional.maigreysmind.com/afwebs-files/forum/test.html以防您不想在本地运行它。如果你能帮助我，请提前感谢你。

    <head>

    <script type="text/javascript">

    function allowDrop(ev) {
    ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        if (ev.target.id == "position1") {
            document.getElementById("form-block1").innerHTML = document.getElementById(data).id;
        }
        else if (ev.target.id == "position2") {
    document.getElementById("form-block2").innerHTML = document.getElementById(data).id;
        }
        else if (ev.target.id == "position3") {
            document.getElementById("form-block3").innerHTML = document.getElementById(data).id;
        }
        else {};
    }

    </script>

    </head>

    <body>

        <div style="position:relative; float:left; border:1px solid black; width:70px; height:70px;" ondrop="drop(event)" ondragover="allowDrop(event)"><div style="border:1px solid black; width:68px; height:68px;" draggable="true" ondragstart="drag(event)" id="WJ1431" width="68" height="68">container</div></div>

        <div style="position:relative; float:left; border:1px solid black; width:70px; height:70px;" ondrop="drop(event)" ondragover="allowDrop(event)"><div style="border:1px solid black; width:68px; height:68px;" draggable="true" ondragstart="drag(event)" id="WJ1426" width="68" height="68">container</div></div>

      <div style="position:relative; float:left; border:1px solid black; width:70px; height:70px;" ondrop="drop(event)" ondragover="allowDrop(event)"><div style="border:1px solid black; width:68px; height:68px;" draggable="true" ondragstart="drag(event)" id="WJ1418" width="68" height="68">container</div></div>

    <div style="clear:left;">&nbsp;</div>



    <div style="width:70px; height:70px; border:1px solid black; float:left;" id="position1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div style="width:70px; height:70px; border:1px solid black; float:left;" id="position2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div style="width:70px; height:70px; border:1px solid black; float:left;" id="position3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


    <div style="clear:left;">&nbsp;</div>

    <form id="form17" name="webapp-form" method="POST" action="">
     <div style="float:left;"> <table width="220" bgcolor="#f4f1e7" border="1" cellspacing="0">
        <tr>
          <td><textarea id="form-block1" type="text" cols="7" rows="4" maxlength="24"></textarea></td>
          <td><textarea id="form-block2" type="text" cols="7" rows="4" maxlength="24"></textarea></td>
          <td><textarea id="form-block3" type="text" cols="7" rows="4" maxlength="24"></textarea></td>
        </tr>
      </table>
      </div></form>

    </body>

Answer 1

编辑<textarea>后，其innerHTML将被忽略。您需要像任何其他输入字段一样设置其value。所以改为：

if (ev.target.id == "position1") {
    document.getElementById("form-block1").value = document.getElementById(data).id;
}
else if (ev.target.id == "position2") {
    document.getElementById("form-block2").value = document.getElementById(data).id;
}
else if (ev.target.id == "position3") {
    document.getElementById("form-block3").value = document.getElementById(data).id;
}

BTW，document.getElementById(x).id与x相同。

用户编辑字段时，Javascript编辑的表单字段失败

1 个答案: