jQuery让textarea支持Ctrl+Z“撤销”功能

JQuery

1个成员

jQuery让textarea支持Ctrl+Z“撤销”功能

发表于 2017-01-30 • 2486 次查看

要想textarea有撤销功能这个还真不好做，特别是以前的js来实现，今天我们利用jquery就可以快速实现了Ctrl+Z 撤销功能哦。有需要的朋友可以参考一下。

核心代码就这么一点点

代码如下

复制代码

完整的实例

代码如下

复制代码

<!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]+"rn[" + i + "]rn-----------------------rn"+$("#s").val());
            }
        }
    </script>

</head>
<body>

<button onclick="show()">显示历史记录</button>
<textarea id="s" style="width:400px; height:300px;">
</textarea>
<hr />
按Ctrl+Z一步一步撤销
<hr />
交流请加QQ 10590916
</body>
</html>

只看楼主回复倒序查看回复

发表回复

你还没有登录，请先登录或注册！

(大小不能超过2MB，文件类型支持png ,jpg ,gif ,doc ,xls ,txt ,rar ,zip .)