如何通过按下按钮编辑占位符？ （jQuery） - 编辑

Question

我的脚本实际上有一些问题，完全不知道如何解决我的问题。我想通过按一个按钮进入编辑模式，然后我的<input type="text"> 将能够被编辑。

当我按下取消时，那么之前写入占位符的值，保持不变。

这里是更清楚的小提琴：

$('button#editMode').click(function() {
  $(this).css("display", "none");
  $("button#validEdit").css("display", "inline");
  $("button#cancelEdit").css("display", "inline");
  $("input[name='Field']").prop("disabled", false);

});

var prevanswer =

  $('button#cancelEdit').click(function() {
    $("button#validEdit").css("display", "none");
    $("button#cancelEdit").css("display", "none");
    $("button#editMode").css("display", "inline");
    $("input[name='Field']").prop("disabled", true);

  });


$('button#validEdit').click(function() {
  var answer = $("input[name='Field']").val();
  $("input[name='Field']").val("");
  $("input[name='Field']").prop("disabled", true);
  $('input[name="Field"]').attr("placeholder", answer);
});

#validEdit {
  display: none;
}

#cancelEdit {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="editMode"> Edit Mode </button>
<button id="validEdit"> Confirm </button>
<button id="cancelEdit"> Cancel </button>

<input name="Field" placeholder="Value" type="text" disabled>

这是我的问题，我完全不知道，我该怎么做=( 如果你能帮助我，那就太好了。提前致谢 ！

Answer 1

试试这个

$('button#validEdit').click(function() {
    var $field = $('input[name="Field"]');
    $field.data('oldPlaceholder', $field.attr('placeholder');
    $field.attr("placeholder", "Type your answer here");
});

然后恢复到旧占位符

$('button#cancelEdit').click(function() {
    var $field = $('input[name="Field"]');
    $field.attr("placeholder", $field.data('oldPlaceholder'));
});