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

【问题标题】：Form fields edits by Javascript fail when user edits field当用户编辑字段时，Javascript 的表单字段编辑失败
【发布时间】：2014-10-25 03:36:52
【问题描述】：

这是我在没有太多经验的情况下编写的一些 javascript 的基本内容。我认为该错误可能很明显，我似乎无法找到。该过程是用户可以将元素移动到设计区域中；然后通过电子邮件发送带有元素 ID#s 的设计规范。错误在于，如果用户决定直接编辑表单字段，则自动插入文本的脚本部分将停止工作。是“回归”吗？缺少的动作？还是“焦点（）”？我已经尝试了一些无效的方法。我将在此处上传这个小文件：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>

【问题讨论】：

标签： javascript forms drag-and-drop

【解决方案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;
}

顺便说一句，document.getElementById(x).id 与 x 相同。

【讨论】：