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>

这里我希望用户点击编辑按钮时有一个光标，当用户输出文本和点击时，保存'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，只包含文本，如下所示：

<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";

Answer 3

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

        <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>

使用javascript更改div的文本

3 个答案: