1

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

4

2 回答 2

4

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

该代码是基于纯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-18T17:44:39.860 回答
2

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

  • 这只是给你一个想法——有很多方法可以解决这个问题。
  • 在 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>

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-18T17:33:13.227 回答