表单元素不返回新值

Posted 2023-04-18

【中文标题】表单元素不返回新值

【英文标题】：Form element not returning new value

【发布时间】：2012-10-19 08:56:36

【问题描述】：

我正在尝试创建一个脚本，允许用户单击带有h1'd 文本位的div 元素，然后将h1 替换为文本框和编辑后单击的图形。单击图形后，div 将用新编辑的 h1'd 位文本替换文本框和图形。

以下是函数：

function savename() 
    var s = $('#mytextbox').val();
    $('#mydiv').replaceWith('<div id="mydiv" onclick="editname();"><h1>' + s + '</h1></div>');

function editname() 
    var strName = $('#mydiv').text();
    $('#mydiv').replaceWith($('<div id="mydiv"><input id="mytextbox" name="mytextbox" type="text" value="' + strName + '"><img id="mysavebutton" src="images/save.gif" onclick="savename();"></div>'));

这里是 div：

<div id="mydiv" onclick="editname();"><h1>Some text I want to edit</h1></div>

所以，div 点击功能可以正常工作。它将h1 元素替换为一个文本框。当我单击保存图形时，它也可以正常工作，因为它返回h1。问题是，文本框的值应该是h1'd 文本。那部分不工作。它仍然保留旧值。在将“s”设置为.val() 后，我对“s”发出了警告，即使在编辑后它仍然显示旧值。我觉得我错过了一些简单的东西，但我整天都在与它作斗争，需要一些新鲜的眼睛来替我看。提前致谢。

【问题讨论】：

似乎对我有用。 jsfiddle.net/cwfhY/2

我应该澄清一下，里面有 h1 的 div 首先出现。您的测试从输入框开始。但是，当我编辑您的测试时，这并没有改变任何东西。原来是因为我把它放在了一个表格里。一旦我将 div 放在表单之外，它就起作用了。

【参考方案1】：

与其替换 mydiv 并尝试重新创建 mydiv，不如在单击时隐藏 mydiv 并在尝试保存时更改 h1 标签的值？

在 html 中你可以有这样的东西：

<div id="mydiv">
    <h1 id="myoutput" onclick="editname();"> ... </h1>
    <input id="mytextbox" name="mytextbox" type="text" style="display:none;">
    <img id="mysavebutton" src="images/save.gif" onclick="savename();" style="display:none" /> 
</div>

然后在javascript中：

function editname()

    var s = $('#myoutput').text();
    $('#myoutput').css('display', 'none');
    $('#mytextbox').val(s).css('display','inline');
    $('#mysavebutton').css('display', 'inline');

function savename()

    var s = $('#mytextbox').val();
    $('#myoutput').text(s).css('display', 'inline');
    $('#mytextbox').css('display', 'none');
    $('#mysavebutton').css('display', 'none');

【讨论】：

我曾考虑过这一点，并且可能会更改生产代码以使其像那样工作，但我决心找出编辑不起作用的原因。正如我在对 Fabricio 的评论中所说，事实证明将其包装在一个表格中是问题所在。所以，虽然你的方法更干净，但它并不能解决问题。

【参考方案2】：

这对我有用，并且是原生 ES5（ECMAScript 5 规范）- 没有库

(fiddle)

JavaScript：

document.addEventListener("DOMContentLoaded", function() 
    "use strict";

    var divElem = document.getElementById("div"),
        textInputElem = document.createElement("input"),
        buttonElem = document.createElement("input");

    textInputElem.type = "text";
    buttonElem.type = "button";
    buttonElem.value = "Apply";

    function removeChildren(elem) 
        while (elem.firstChild) 
            elem.removeChild(elem.firstChild);
        
    

    function divClick() 
        removeChildren(divElem);
        divElem.appendChild(textInputElem, divElem.firstChild);
        divElem.appendChild(buttonElem);
        divElem.removeEventListener("click", divClick, true);
    

    buttonElem.addEventListener("click", function() 
        var textNode;

        if (textInputElem.value !== "") 
            removeChildren(divElem);
            textNode = document.createTextNode(textInputElem.value);
            divElem.appendChild(textNode);
            divElem.addEventListener("click", divClick, true);
        
    , false);
    divClick();
, false);

HTML：

<div id="div"></div>​

这是关于 Element.AddEventListener() 的 MDN 文档：MDN: AddEventListener