使用編輯模式創建表單

您是否知道如何使用編輯模式創建表單？有關詳細信息：假設我有一個包含5個或6個字段的表單，其中包含「保存」和「取消」按鈕。如果我保存表單，它將顯示沒有文本字段的純文本格式，並且會出現名爲「編輯」的按鈕。當我點擊「編輯」時，表單將是可編輯的。可能嗎？使用編輯模式創建表單

來源

2013-08-18 Ebrahim Khalil

是的，這是可能的 – Sebas

任何鏈接啓動？請幫助先生。 –

看看：[我怎樣才能在Web窗體中只讀域？]（http://www.cs.tut.fi/~jkorpela/forms/readonly.html）作爲開始的地方。 – dc5

完整的示例，只要你想可以處理多達輸入的Fileds。（沒有選擇，文本區域.. ）

該代碼是基於純JavaScript和css3的現代瀏覽器編寫的。

在Chrome上測試。

隱藏和顯示用CSS3按鈕，

保存默認值應用它們的取消，對輸入按鈕

響應。

如果有任何問題..只是問

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Modern Form</title> 
<style> 
label{display:block;} 
form input{border:none;outline:none;box-sizing:border-box;} 
form.invert input{border:1px solid rgba(0,0,0,0.2);outline:none;} 

form>button:nth-of-type(1){ 
color:green;display:none; 
} 
form>button:nth-of-type(2){ 
color:red;display:none; 
} 
form>button:nth-of-type(3){ 
color:yellow;display:inline-block; 
} 
form.invert>button:nth-of-type(1){ 
display:inline-block; 
} 
form.invert>button:nth-of-type(2){ 
display:inline-block; 
} 
form.invert>button:nth-of-type(3){ 
display:none; 
} 
</style> 
<script> 
(function(W){ 
var D,form,bts,ipt; 
function init(){ 
    D=W.document,previous=[]; 
    form=D.getElementsByTagName('form')[0]; 
    bts=form.getElementsByTagName('button'); 
    ipt=form.getElementsByTagName('input'); 
    form.addEventListener('submit',save,false); 
    bts[1].addEventListener('click',cancel,false); 
    bts[2].addEventListener('click',edit,false); 
} 
function save(e){ 
    e.preventDefault(); 
    form.classList.remove('invert'); 
    var l=ipt.length; 
    while(l--){ 
    ipt[l].readOnly=true; 
    }; 
    previous=[]; 
    //send your info here 
} 
function edit(e){ 
    e.preventDefault(); 
    form.classList.add('invert'); 
    var l=ipt.length; 
    while(l--){ 
    previous[l]=ipt[l].value; 
    ipt[l].readOnly=false; 
    } 
} 
function cancel(e){ 
    form.classList.remove('invert'); 
    e.preventDefault(); 
    var l=ipt.length; 
    while(l--){ 
    ipt[l].value=previous[l]; 
    ipt[l].readOnly=true; 
    } 
} 
W.addEventListener('load',init,false); 
})(window) 
</script> 
</head> 
<body> 
<form> 
<label>A:<input readonly></label> 
<label>B:<input readonly></label> 
<label>C:<input readonly></label> 
<button>Save</button><button>Cancel</button><button>Edit</button> 
</form> 
</body> 
</html>

PS：在處理函數可以合併成一個更大的功能...但我認爲這種方式很容易理解

來源

2013-08-18 17:44:39 cocco

冒着創造一個[你的例子小提琴]（http://jsfiddle.net/d7TeL/）的自由將刪除，如果你願意... – dc5

np，做得好...我不使用jsfiddle .. – cocco

非常有效的代碼。使用Bootstrap 100％工作！做得好！非常感謝！ –

以下是非常簡單的示例如何做到這一點。

這只是給你一個想法 - 有很多方法可以解決這個問題。
作品在Chrome中，在其他瀏覽器沒有經過充分測試（例如：假設2像素邊框）
您做些什麼取決於你的UX和瀏覽器要求

Sample Fiddle

HTML

<span>Example</span> 
<div class="example"> 
    <form> 
     <label for="ex1fld1">Field 1:</label><input type="text" name="ex1fld1" readonly value="Hello"></input> 
     <label for="ex1fld2">Field 2:</label><input type="text" name="ex1fld2" readonly></input> 
     <input type="button" value="Edit"></inpu> 
    </form> 
</div>

CSS

div { 
    margin-bottom: 20px; 
    margin-top: 10px; 
} 

input[type="text"] { 
    font-size: 14px; 
} 

input[type="text"][readonly] { 
    border: 2px solid rgba(0,0,0,0); 
}

腳本（jQuery的使用在這裏，但不要求這樣的事情）

var readonly = true; 
$('.example input[type="button"]').on('click', function() { 
    $('.example input[type="text"]').attr('readonly', !readonly); 

    readonly = !readonly; 
    $('.example input[type="button"]').val(readonly ? 'Edit' : 'Save'); 
    return false; 
});

來源

2013-08-18 17:33:13 dc5

使用編輯模式創建表單

回答

相關問題