使用javascript更改div的文本

Question

我有一个 div 标签，我在其中输入了 sime 文本。现在我想，当用户点击按钮时，应该会弹出一个光标并让用户编辑文本。当用户点击保存按钮时，文本应该显示 div 标签代替旧文本..

我的 div 标签为：

<div id="topdiv" style="color:Blue" onmouseover="button1();">
    <input type="button" id="btndiv" type="hidden" onclick="edit1();"/>
     Div Tag
    </div> 

当用户单击编辑按钮时，我希望有一个光标，并且当用户 ebters 文本并单击保存时，“div 标签”文本应该被新文本替换..

如何使用 java 脚本来做到这一点..

Answer 1

从技术或语义角度来看，您所做的一切都毫无意义。只需使用textarea。

<textarea id="content" value="sample text" disabled="true" /></textarea>
<input type="button" id="edit" value="edit" onClick="edit()" />
<input type="button" id="save" value="save" onClick="save()" />


function edit() {
    document.getElementById('edit').style.display = 'none';
    document.getElementById('save').style.display = 'block';
    document.getElementById('content').disabled = false;
}

function save() {
    document.getElementById('save').style.display = 'none';
    document.getElementById('edit').style.display = 'block';
    document.getElementById('content').disabled = true;
}

#content {
    width: 300px;
    height: 200px;
}

#edit, #save {
    padding: 2px;
    width: 50px;   
}

#save {
    display: none;   
}

例如here

Answer 2

//此示例代码带有提示（弹出输入），如果您想使用文本框，代码将相应替换。

        <div id="topdiv" style="color:Blue" onmouseover="button1();">
            <input type="button" id="btndiv" style='display:hidden'  onclick="edit1();"/>
             <div id="text1"> </div>
            </div>
    <script>
    function button1()
    {
       document.getElementById ("btndiv").display = '';
    }

    function edit1()
    {
      var val = prompt ("Enter some value");
       document.getElementById ("text1").innerHTML = val;
       document.getElementById ("btndiv").display = 'hidden';
    }

</script>

Answer 3

我建议创建一个只包含文本的内部 div，如下所示：

<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="editbtndiv" onclick="edit1();" value="edit"/>
<input type="button" id="savebtndiv" onclick="save1();" value="save"/>
<input type="text" id="inputdiv" style="display:none;" />
<div id="divtext"> Div Tag </div>
</div> 

然后，显示输入字段并隐藏文本：

var editObj = document.getElementById("editbtndiv");
editObj.style.display = "none";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "block";

var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "block";
var txtObj = document.getElementById("divtext");
txtObj.style.display = "none";

然后用户完成他的工作，点击保存，您可以隐藏输入字段并显示文本：

var editObj = document.getElementById("editbtndiv");
editObj.style.display = "block";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "none";

var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "none";
var txtObj = document.getElementById("divtext");
txtObj.value = divObj.value;
txtObj.style.display = "block";