使用Jquery实现点击文字后变成文本框且可修改

下面就是使用 jQuery 实现点击文字后变成文本框且可修改的完整攻略。

实现思路

1. 选中需要被点击变为文本框的元素
2. 给元素绑定 click 事件，点击后将其内容存储在一个变量中，并将元素变为可编辑状态的文本输入框
3. 文本输入框失去焦点时，将新的内容存储在一个变量中，并将文本输入框变为普通的元素

示例代码

HTML 结构

<div class="editable">这是一段可编辑的文本</div>

CSS 样式

.editable {
  cursor: pointer; /* 鼠标悬停时显示“编辑”样式 */
}

JavaScript 代码

$(document).ready(function() {

  // 绑定元素点击事件
  $('.editable').click(function() {

    // 存储原始文本内容
    var originalText = $(this).text();

    // 转换为编辑状态的输入框
    $(this).html('<input type="text" class="edit-input" value="' + originalText + '">');

    // 获取新的文本内容
    $('.edit-input').focus(); // 使输入框获得焦点
    $('.edit-input').blur(function() {
      var newText = $(this).val();
      $(this).parent().html(newText); // 还原为文本框前的元素
    });

  });

});

示例说明

示例1

<div class="editable">这是一段可编辑的文本</div>

点击文本后，会变为文本框，如下所示：

<div class="editable"><input type="text" class="edit-input" value="这是一段可编辑的文本"></div>

进行修改后，当失去焦点时，文本框将变为文本，如下所示：

<div class="editable">修改后的内容</div>

示例2

<div class="editable">另一段可编辑的文本</div>

点击文本后，会变为文本框，如下所示：

<div class="editable"><input type="text" class="edit-input" value="另一段可编辑的文本"></div>

进行修改后，当失去焦点时，文本框将变为文本，如下所示：

<div class="editable">修改后的内容</div>

以上就是使用 jQuery 实现点击文字后变成文本框且可修改的完整攻略，有不明白的地方可以随时询问哦。