値をプレーンテキストとして持つ編集可能なフォームの読み取り専用ビュー

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();