如何在Javascript中编辑标签文本

Question

我在html

中使用Label或Div

<label id="userId" class="normalWeight editInfo"></label>

当页面加载时，我将值赋给该id

document.getElementById('userId').innerHTML = allInfo.details.userId;

当我点击编辑按钮时，即文本将是可编辑的。然后我将更改文本并存储到服务器中。如何做这个概念

我想要那样。不使用文本框。有可能吗？

Answer 1

标签的ID为userName，您正在搜索userId。

尝试

document.getElementById('userName').innerHTML = allInfo.details.userId;

要允许编辑，您应该添加一个隐藏的文本框，当您单击编辑按钮时，该文本框将被切换。

将此值分配给

document.getElementById('userName_Edit').value = allInfo.details.userId;

然后将其切换为可见，并隐藏标签。

document.getElementById('userName').style.display = "none";
document.getElementById('userName_Edit').style.display = "block";

Answer 2

您可以使用ajax和contenteditable属性 像这样的东西？

function edit_label () {
    var l = document.getElementById('userID');
    if(this.innerHTML == 'Edit') {
        this.innerHTML = 'Save';//we set the button's value to 'save'
        l.removeAttribute("contentEditable");
    }
    else {
        this.innerHTML = 'Edit';//we set the button's value to 'edit'
        l.setAttribute("contentEditable", false);

        //Here you should use ajax to send the data.
        var data = l.innerHTML;//this will be sent
    }
}
document.getElementById('edit_button').onclick = edit_label;

演示：http://jsfiddle.net/uwaVL/

你应该在使用它之前学习ajax w3schools中的Ajax教程：http://www.w3schools.com/ajax/default.ASP