基于jQuery的让textarea支持Ctrl+Z步步撤销功能

时间:2020-05-13 人气:0

代码相对不多。
主要的是：

演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="http://z3f.me/js/jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var log = []; 
$(function () { 
var txt = window.setInterval(function () { 
if (log[log.length - 1] != $("#t").val()) { 
log[log.length] = $("#t").val(); 
} 
}, 1500); 
var isCtrl = false; 
$(document).keydown(function (e) { 
if (e.which === 17) 
isCtrl = true; 
if (e.which === 90 && isCtrl === true) { 
log.pop(); 
$("#t").val(log[log.length - 1]).blur(); 
$("#s").val(log[log.length - 1]).blur(); 
} 
}).keyup(function (e) { 
if (e.which === 17) 
isCtrl = false; 
}); 
}); 
function show() { 
$("#s").val(""); 
for (var i = 0; i < log.length; i++) { 
$("#s").val(log[i]+"\r\n[" + i + "]\r\n-----------------------\r\n"+$("#s").val()); 
} 
} 
</script> 
</head> 
<body> 
<textarea id="t" style="width:400px; height:300px;"> 
</textarea> 
<button onclick="show()">显示历史记录</button> 
<textarea id="s" style="width:400px; height:300px;"> 
</textarea> 
<hr /> 
按Ctrl+Z一步一步撤销 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容