Question

制作文字＆＃34;可编辑＆＃34;我编写了一个函数，用input元素替换文本（step1），稍后（onchange）用input-element的值替换文本（step2）

除了以下场景之外，这是有效的：如果input-element处于活动状态（precedure的step1）并且我在input-element中单击，则文本（在input-element中）将替换为＆＃34; undefined＆＃ 34;并且该功能不再适用

<html>
<head>

<title>Test</title>

<script type="text/javascript">
<!--

// global variables for use in (out-of-function) listeners
var changeText_actual;
var changeText_parent;

function changeText(actual) {
    // element representing a textNode
    changeText_actual = actual;
    // element containing the textNode
    changeText_parent = actual.parentNode;

    // create a new html-element to input text
    var textfield = window.document.createElement("input"); {
        textfield.setAttribute("type", "text");
        // text in textNode
        textfield.setAttribute("value", actual.data);
        // listener for when user has finished input (e.g. by pressing return)
        textfield.setAttribute("onchange",
             // if inputText is not empty
             "if(this.value && this.value.length > 0) {"
                 // fill textNode with inputText
            +"    changeText_actual.data = this.value;"
            +"}"
            // remove input-element and put textNode inplace
            +"changeText_parent.replaceChild(changeText_actual, this);"
        );
    }

    // remove textNode and put input-element inplace
    changeText_parent.replaceChild(textfield, changeText_actual);
    // select inputText for faster editing
    textfield.select();
}

//-->
</script>

</head>
<body>

<table border="1"><tr>
<th>1. Text</th><th onclick="changeText(this.firstChild)">2. Text</th><th>3. Text</th>
</tr><tr>
<td>4. Text</td><td>5. Text</td><td>6. Text</td>
</tr></table>

</body>
</html>

我只是寻求解释而不是解决方案，因为我觉得有能力解决这个问题，如果我知道，那么＆＃34; undefined＆＃34;来自（我可以抓住它）

Answer 1

1 \第一次点击＆lt; th＆gt;元素，它的第一个子节点是文本节点。它的数据属性是“2. Text”。所以当你引用this.firstChild时，它是一个文本节点。

2 \将使用textnode作为参数调用函数changeText，因此“actual”将是一个文本节点。

然后将文本节点更改为文本框。

3 \当你点击文本框时，它的父母的onclick处理程序再次执行（on＆lt; th＆gt;的onclick），但这次，this.firstChild是＆lt; input＆gt; tag，因此将使用input元素作为参数调用该函数。参数“actual”将是一个输入元素。 input元素没有名为data的属性，所以在

行

    textfield.setAttribute("value", actual.data);

actual.data未定义。

这是你问题的答案，但我觉得有必要澄清一些事情：

你实际上可以使用textfield.onclick = function（）{.....}编写一个更安全的函数。

使用onchange将文本框更改回文本并不总是很容易（例如，如果你不想改变任何东西），你应该检查元素是否也失去它的焦点（模糊）。

Javascript onchange - 在点击时获取未定义

1 个答案: