Question

我想在此可编辑字段中添加一个取消按钮，这将使该字段不可编辑并撤消当前所做的更改。

$('button').on('click', function() {
  if ($(this).hasClass('save')) {
    alert("Saved!!!");
    $(this).text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  } else {
    $(this).text("Save").addClass('save');
    $('.company').attr('contenteditable', 'true').css({
      'border': 'black solid 1px',
      'outline': 'none'
    }).focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

Answer 1

我对您的代码做了一些修改，然后为您的cancel按钮添加了click事件：

$('button.edit').on('click', function() {
  if ($(this).hasClass('save')) {
    alert("Saved!!!");
    $(this).text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  } else {
    $(this).text("Save").addClass('save');
    $('.company').attr("data-oldText",$('.company').text())
    $('.company').attr('contenteditable', 'true').css({
      'border': 'black solid 1px',
      'outline': 'none'
    }).focus();
  }
});

$('button.cancel').on("click", function() {
  if ($('button.edit').hasClass('save')) {
    $('.company').text($('.company').attr("data-oldText"))
    $('button.edit').text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  }
});

我已经添加了$('.company').attr("data-oldText",$('.company').text())，因此当您按edit时，它将“保存”旧数据。

然后，如果您按cancel，它将用旧文本替换当前文本。

工作演示

$('button.edit').on('click', function() {
  if ($(this).hasClass('save')) {
    alert("Saved!!!");
    $(this).text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  } else {
    $(this).text("Save").addClass('save');
    $('.company').attr("data-oldText", $('.company').text())
    $('.company').attr('contenteditable', 'true').css({
      'border': 'black solid 1px',
      'outline': 'none'
    }).focus();
  }
});

$('button.cancel').on("click", function() {
  if ($('button.edit').hasClass('save')) {
    $('.company').text($('.company').attr("data-oldText"))
    $('button.edit').text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

如何为“ contenteditable”可编辑字段添加取消按钮？

1 个答案: