可編輯表單的只讀視圖，其值為純文本

Question

如何通過調用函數將表單轉換為只讀視圖？ 我不想在禁用的輸入字段中顯示值，而是將其顯示為純文本。 我正在使用JavaScript實現它。

Answer 1

不必強制禁用字段，它們也可以是只讀的，您只需要遍歷所有輸入字段，應用readonly屬性以及某些css類，使它們看起來更像純文本而不是輸入字段。

var inputs = document.querySelectorAll('input[type=text]'), i;
for (i = 0; i < inputs.length; ++i) {
  inputs[i].classList.add('input-readonly');
  inputs[i].setAttribute('readonly', true);
}

概念證明： https : //jsfiddle.net/4rkn5qda/

PS：您還必須考慮其他類型的字段。

Answer 2

嘗試使用jQuery：

var myform = $('.myform')
myform.find('input').each(function() {
    var currentEl = $(this),
        currentVal = $(this).val();
    myform.after(currentVal + '<br>');
});
myform.hide();