使用jQuery将标签更改为文本框?

时间:2011-12-11 19:13:51

标签: jquery asp.net textbox label

如何使用jQuery将标签更改为文本框?例如,我有2个按钮,一个是编辑,另一个是视图。当用户单击编辑按钮时,所有标签控件将变为文本框。另一方面,当使用时单击视图按钮,所有文本框将更改为标签。我知道我可以使用“可见”属性来显示某些控件。但是我的页面控制太多了。它花了我很多时间来编码。任何人都可以帮助我吗?

2 个答案:

答案 0 :(得分:10)

您可以使用jQuery的replaceWith函数。

$( "label" ).replaceWith( function() {
    return "<input type=\"text\" value=\"" + $( this ).html() + "\" />";
});

演示:http://jsfiddle.net/eqne2/1/

答案 1 :(得分:0)

我认为您想要的是能够在用户点击按钮时更改按钮上的文字。

如果是这种情况,那么试试这个: http://jsfiddle.net/kasdega/MGCVW/

$(document).ready(function() {
    $(".textButton").click(function() {
        var me = $(this);

        me.hide();
        me.after("<input id='tmpInput'/>");
        $("#tmpInput").focus();
        $("#tmpInput").bind("keyup", function(e) {
            e.preventDefault();
            if (e.keyCode == '13') {
                var value = $(this).val();
                $(this).remove();
                if(me.is("input")) {
                    me.val(value);
                } else if(me.is("button")) {
                    me.text(value);
                }
                me.show();
            }
            return false;
        });
    });
});