javascript实现鼠标点击文本后变为输入框（文本动态编辑）

javascript实现鼠标点击文本后变为输入框

有不少页面应用中会有这样的情境：当鼠标放到一段文本并点击时，会隐藏当前文本，然后显示出一个编辑框，可用来对现在文本进行编辑。当鼠标在其他地方点击时，恢复到原来的文本显示，效果如下：

原始文本：

鼠标点击后如下：


我这里实现思路是：开始时有一个<p></p>用于最初文本的显示。当点击后，此标签的display被设置为none，同时创建两个新的元素：input和button。代码如下：

初始的页面效果代码：

<td class="noborder" colspan="2">
    <div class="smallpicdiv" style="margin-left: 20px;">
		<a href="../Item/ItemDetail?numIid=@item.NumIid" title="查看宝贝详情" target="_blank">
			<img src="@item.PicUrl" class="smallpic" alt="点击查看宝贝详情" />
		</a>
    </div>
    @{
		var titleId = "item_" + @item.NumIid;
    }
    <div style="float: left;">
		<p id="@titleId" class="itemTitleBg" onmouseover="showBgColor(this)" 
			onmouseout="hiddenBgColor(this)" title="编辑" onclick="hiddenEle('@item.NumIid');" >@item.Title</p>
    </div>
 </td>

对应的js代码如下，在注释中有详细的说明：

// 获得初始文本，设置为隐藏，然后判断是否已有输入域，如果没有则创建输入框
function hiddenEle(id) {
        var titleP = document.getElementById("item_" + id);
        titleP.style.display = "none";	
        if (!document.getElementById("title_input_" + id)) {
            buildEditDiv(titleP.parentNode, id);
        }
    }
	//创建输入框和保存按钮
    function buildEditDiv(titleDiv, id) {
        var editText = document.createElement("input");
        var titleP = document.getElementById("item_" + id);
        var oldTitle = titleP.firstChild.data;
        editText.setAttribute("class", "newItemTitle");
        editText.setAttribute("type", "text");
        editText.value = oldTitle;
        editText.name = id;
        editText.id = "title_input_" + id;

        titleDiv.appendChild(editText);

        titleDiv.appendChild(document.createElement("br"));

        var submitButton = document.createElement("button");
        submitButton.appendChild(document.createTextNode("保存"));
        submitButton.id = "title_button_" + id;
        submitButton.onclick = function () {
            ajaxChangeTitle(id, oldTitle, editText.value);
            return false;
        }
		//这里输入框失去焦点后，设置了等待时间200ms才执行删除input和button操作，主要是为了在删除input之前，在button的onclick动作中能获得input的新值。
        editText.onblur = function () {
            setTimeout(function () {
                titleDiv.removeChild(submitButton);
                titleDiv.removeChild(titleDiv.lastChild);
                titleDiv.removeChild(editText);
                titleP.style.display = "";
            }, 200);
        }
        titleDiv.appendChild(submitButton);
        editText.focus();
    }
    function ajaxChangeTitle(id, oldTitle, newTitle) {
        var titleP = document.getElementById("item_" + id);
        titleP.firstChild.data = newTitle;
        $.ajax(
        {
            url: '/TopDemo/Item/UpdateTitle',
            data: '{"iid":"' + id + '", "newTitle":"' + newTitle + '" }',
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data == null || data.length == 0 || data == "false") {
                    updateTitleError(id, oldTitle);
                }
            },
            error: function (data) {
                updateTitleError(id, oldTitle)
            }
        });
    }
    function updateTitleError(id, oldTitle) {
        var titleP = document.getElementById("item_" + id);
        titleP.firstChild.data = oldTitle;
        alert("更新宝贝标题失败");
    }

    function showBgColor(ele) {
        ele.setAttribute("class", "itemTitleBg_c");
    }

    function hiddenBgColor(ele) {
        ele.setAttribute("class", "itemTitleBg");
    }

这样就实现了简单的动态编辑文本的效果了。