如何在单击文本时将其更改为文本框

How to change text to textbox on clicking it

本文关键字：文本 单击      更新时间：2023-09-26

这是通过单击标签来更改标签值的小提琴。

但是我不想在单击编辑（href）时执行此操作

我只想单击名称并将其更改为文本框，当我将鼠标放在外面时，它应该变回标签

我该怎么做？

这是我的jquery代码

    $(document).ready(function() {
    $('a.edit').click(function () {
        var dad = $(this).parent().parent();
        dad.find('label').hide();
        dad.find('input[type="text"]').show().focus();
    });
    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').show();
    });
});

这样的事情怎么样。演示

$(document).ready(function() {
    $('.control-label').click(function () {
        $(this).hide();
        $(this).siblings('.edit-input').show();
    });
    $('.edit-input').focusout(function() {
        $(this).hide();
        $(this).siblings('.control-label').text($(this).val()).show();
    });
});

你可以用这个修改版的小提琴试试：

$(document).ready(function() {
    $('.control-label').click(function () {
        $(this).hide();
        var dad = $(this).parent();
        dad.find('input[type="text"]').show().focus();
    });
    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').text(this.value).show();
    });
});

不过，它不会设置之前标签中的默认值。

只需将点击功能的目标从：

$('a.edit').click(function () {

自

$('.text-info').click(function () {

如果您希望在鼠标退出时隐藏输入，而不是在外部单击时隐藏输入，也可以添加悬停功能。例如：

$('input[type=text]').hover(function () {
}, function () {
    var dad = $(this).parent();
    $(this).hide();
    dad.find('label').show();
});

这是你调整的小提琴。

相关文章：