Javascript 使用编辑模式创建表单_Javascript_Forms

Javascript 使用编辑模式创建表单

javascript forms

Javascript 使用编辑模式创建表单,javascript,forms,Javascript,Forms,您知道如何使用编辑模式创建表单吗？详细信息：假设我有一个包含5或6个字段的表单，其中有“保存”和“取消”按钮。如果我保存表单，它将显示没有文本字段的普通表单，并且会出现一个名为“编辑”的按钮。当我点击“编辑”时，表单将是可编辑的。有可能吗？以下是一个非常简单的示例，说明了如何做到这一点这只是给你一个想法——有很多方法可以做到这一点在chrome中工作，在其他浏览器中完全未经测试（例如：假定为2像素边框）您所做的将取决于您的用户体验和浏览器需求 HTML <span>Exa

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

以下是一个非常简单的示例，说明了如何做到这一点

这只是给你一个想法——有很多方法可以做到这一点
在chrome中工作，在其他浏览器中完全未经测试（例如：假定为2像素边框）
您所做的将取决于您的用户体验和浏览器需求

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>

脚本（这里使用jQuery，但类似的东西不需要）

下面是一个非常简单的示例，说明了如何做到这一点

这只是给你一个想法——有很多方法可以做到这一点
在chrome中工作，在其他浏览器中完全未经测试（例如：假定为2像素边框）
您所做的将取决于您的用户体验和浏览器需求

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>

脚本（这里使用jQuery，但类似的东西不需要）

完整示例，可以处理任意数量的输入文件。（无选择，文本区域..）

代码是基于纯javascript和css3的现代浏览器编写的

在铬上测试

使用css3隐藏和显示按钮

保存默认值以在取消时应用它们

按enter按钮进行响应

如果有任何问题。。问问

<!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>


现代形式
标签{显示：块；}
表单输入{边框：无；轮廓：无；框大小：边框框；}
form.invert输入{边框：1px实心rgba（0,0,0,0.2）；轮廓：无；}
表单>按钮：第n个类型（1）{
颜色：绿色；显示：无；
}
表单>按钮：第n个类型（2）{
颜色：红色；显示：无；
}
表单>按钮：第n个类型（3）{
颜色：黄色；显示：内联块；
}
表单反转>按钮：第n个类型（1）{
显示：内联块；
}
表单反转>按钮：第n个类型（2）{
显示：内联块；
}
表单反转>按钮：第n个类型（3）{
显示：无；
}
（功能（W）{
var D、表格、bts、ipt；
函数init（）{
D=W.文件，先前=[]；
form=D.getElementsByTagName（'form'）[0]；
bts=form.getElementsByTagName（'button'）；
ipt=form.getElementsByTagName（“输入”）；
表格.addEventListener（'submit'，save，false）；
bts[1]。addEventListener（'click'，cancel，false）；
bts[2]。addEventListener（'click'，edit，false）；
}
功能保存（e）{
e、 预防默认值（）；
form.classList.remove（'invert'）；
var l=ipt.length；
而(l--){
ipt[l].readOnly=true；
};
先前=[]；
//把你的信息发送到这里
}
功能编辑（e）{
e、 预防默认值（）；
form.classList.add（'invert'）；
var l=ipt长度；
而(l--){
前一个[l]=ipt[l]。值；
ipt[l].readOnly=false；
}
}
功能取消（e）{
form.classList.remove（'invert'）；
e、 预防默认值（）；
var l=ipt长度；
而(l--){
ipt[l]。值=以前的[l]；
ipt[l].readOnly=true；
}
}
W.addEventListener（'load'，init，false）；
})（窗口）
A:
B:
C:
保存取消编辑

ps：处理函数可以合并成一个更大的函数。。。但我认为这样更容易理解完整示例，可以处理任意多的输入文件