当前位置:主页 > JavsScript库 > 表单 >

表单字段的撤消/重做功能 - undoRedo.js
栏目分类:表单   发布日期:2021-08-26   浏览次数:

undoRedo.js 是一个很小的 JavaScript 库,它可以在 HTML 表单元素(如输入、文本区域、复选框、单选按钮等)上启用撤消和重做功能。

使用:

1. 加载undoRedo.js文档中的主脚本。

<script src="scripts/undoRedo.js" type="text/javascript" ></script>

2. 添加 CSS 类undoredo以形成要在其上启用撤消和重做功能的字段。

<div class="inputpair">
  <label for="textInput">文本输入:</label>
  <input class="undoredo" type="text" name="textInput" id="textInput">
</div>
<div class="inputpair">
  <label for="dateInput">日期输入:</label>
  <input class="undoredo" type="date" name="dateInput" id="dateInput">
</div>  
<div class="inputpair">
  <label for="timeInput">时间输入:</label>
  <input class="undoredo" type="time" name="timeInput" id="timeInput">
</div>
<div class="inputpair">
  <label for="checkboxInput">复选框输入:</label>
  <input class="undoredo" type="checkbox" name="checkboxInput" id="checkboxInput">
</div>
<div class="inputpair">
  <label for="radioInput">单选按钮输入:</label>
  <input class="undoredo" type="radio" name="radioInput" id="radioInput">
</div>
<div class="inputpair">
  <label for="textArea">文本区域:</label>
  <textarea class="undoredo" id="textArea"></textarea>
</div>

3. 初始化undoRedo.js。

main();

4. 页面添加撤销和重做按钮。

<input onclick="undoEvent()" type="button" class="undoredo" name="undo" id="undo" value="">
<input onclick="redoEvent()" type="button" class="undoredo" name="redo" id="redo" value="">

5. 确定最大撤销次数。默认值:10。

main(20);


官方网站:https://github.com/John-Berman/UndoRedoJs

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库