Question

您知道如何使用编辑模式创建表单吗？有关详细信息：假设我有一个包含5或6个字段的表单，其中包含“保存”和“取消”按钮。如果我保存表单，它将显示没有文本字段的普通表单，并会出现一个名为“编辑”的按钮。当我点击“编辑”时，表单将是可编辑的。有可能吗？

Answer 1

完整示例，可以根据需要处理任意数量的输入文件。（没有选择，textarea ..）

代码是基于纯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：处理函数可以合并为一个更大的函数......但我认为这样更容易理解

Answer 2

以下是如何完成此操作的非常简单示例。

这只是为了给你一个想法 - 有很多方法可以解决这个问题。
适用于Chrome，在其他浏览器中完全未经测试（例如：假定为2像素边框）
您的工作取决于您的用户体验和浏览器要求

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

使用编辑模式创建表单

2 个答案: