基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能

更新時(shí)間：2011年10月07日 22:24:36 作者：

基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能，需要的朋友可以參考下。

代碼相對(duì)不多。
主要的是：

 
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(); 
} 
}).keyup(function (e) { 
if (e.which === 17) 
isCtrl = false; 
}); 
}); 

演示代碼:

<!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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動(dòng)而移動(dòng)
本文為大家介紹下使用Jquery創(chuàng)建一個(gè)層顯示標(biāo)題的內(nèi)容且隨鼠標(biāo)移動(dòng)，具體的實(shí)現(xiàn)如下
2014-01-01
jQuery zTree如何改變指定節(jié)點(diǎn)文本樣式
這篇文章主要介紹了jQuery zTree如何改變指定節(jié)點(diǎn)文本樣式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
juqery 學(xué)習(xí)之三選擇器層級(jí) 基本
juqery 學(xué)習(xí)之三選擇器層級(jí) 基本，學(xué)習(xí)jquery的朋友可以參考下。
2010-11-11
談?wù)刯Query之Deferred源碼剖析
這篇文章主要介紹了談?wù)刯Query之Deferred源碼剖析,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
為jQuery添加Webkit的觸摸的方法分享
這段代碼是我在做13年一份兼職的時(shí)候無聊加上去的，為jQuery添加觸摸事件的支持。因?yàn)樽龅糜悬c(diǎn)無聊，所以就幫客戶添加了用響應(yīng)式網(wǎng)頁+JS touch兼容了移動(dòng)設(shè)備，主要是Webkit的移動(dòng)設(shè)備
2014-02-02
jquery實(shí)現(xiàn)excel導(dǎo)出的方法
最近要實(shí)現(xiàn)在web頁面上導(dǎo)出excel文件的功能，下面是具體的實(shí)現(xiàn)方法及思路
2013-04-04
用jQuery的AJax實(shí)現(xiàn)異步訪問、異步加載
這篇文章主要介紹了用jQuery的AJax實(shí)現(xiàn)異步訪問、異步加載，jQuery的ajax異步實(shí)現(xiàn)數(shù)據(jù)交互的相關(guān)技巧,并提供了完整示例demo供讀者參考,需要的朋友可以參考下
2016-11-11
瀏覽器打開層自動(dòng)緩慢展開收縮實(shí)例代碼
本文為大家介紹下層自動(dòng)緩慢展開收縮在瀏覽器打開時(shí)是如何實(shí)現(xiàn)的，主要用到了slideUp及slideDown等主要jquery方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
jquery實(shí)現(xiàn)頁面彈球效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)頁面彈球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01