JavaScript - 检测文本区域中的更改

Question

我希望两个textarea的值始终相等。 听一个'改变'事件是不够的，因为我希望这些字段即使有焦点也是平等的。 听到按键似乎不起作用，或者是因为在使用新字母更新字段值之前触发此事件，所以我不确定是否有一种使用按键获取字段当前值的好方法处理程序为了将其复制到其他字段。 任何想法？

Answer 1

关键事件怎么样？

Answer 2

特定浏览器的方法已经在这里讨论：onpropertychange for a textbox in Firefox?

然而，各种实验后，我发现的唯一的跨浏览器的方法是使用window.setInterval（）来检查是否有改变（每20毫秒，例如）。不优雅，但非常有效。

Answer 3

//

function clonekeyup(e){ 
var e= window.event || e; 
var who= e.target || e.srcElement; 
var val= who.value; 
var tem, temp, TA= document.getElementsByTagName('textarea'), L= TA.length; 
while(L){ 
    tem= TA[--L]; 
    if(tem.onchange== arguments.callee && tem.value!= val) tem.value= val; 
} 
} 

分配功能的onkeyup和的onchange到要相互辉映的文字区域。 例如，这会将处理程序分配给所有 textareas。

var tem, TA= document.getElementsByTagName('textarea'), L= TA.length; 
while(L){ 
tem= TA[--L]; 
tem.onkeyup= tem.onchange= clonekeyup; 
} 

Answer 4

使用Shift +字母时KEYUP不能正常工作，但如果你把它绑定到窗口对象，它工作正常。

这里是一个jQuery插件，它利用它的优势：

$.fn.edited = function(callback) { 
    this.each(function() { 

    var that = $(this); 
    var active = false; 

    that.focusin(function() { 
     active = true; 
    }); 

    that.focusout(function() { 
     active = false; 
    }); 

    $(window).keyup(function(e) { 
     if (active) { 
     callback(e); 
     } 
    }); 

    }); 
}; 

用法：

$("textarea").edited(function(){ 
    ... 
}); 

Answer 5

我有同样的问题...

一个textarea的值可以是通过很多方式改变...我只会提到那些我不知道如何检测：

• 鼠标上下文粘贴
• 键盘上下文菜单粘贴
• 将&掉落形成其它应用，对象等
• 移位将来自
• 否则Ctrl键相同textare（选择的其它位置内容愚弄）&掉落+插入 - Shift + Insert键（另一种方式来复制粘贴&）

我曾试图创建每次我知道事件的事件处理程序（的onkeyup，onkeydown事件，ONM ouseup，onmousedown等），但有一些以前的方式做粘贴，没有人被解雇，所以没有办法控制什么时候发生。

我没有看到放置计时器的其他解决方案。

啊！内容也可以在没有焦点的情况下更改...拖动&的情况。

更不用说，如果还可以通过JavaScript改变，顶级动机丑陋的事情......没有办法被解雇！

我不想把一个计时器（这是非常丑陋的做事和potentionaly导致错误）。

如果计时器被触发，但另一个页面正在加载（用户点击一个链接）...你必须控制所有的对象存在...否则会带来一个错误信息（一些浏览器会显示为模态窗口而其他人会忽略它）...所以用户得到一个非常糟糕的impresion ...并在最坏的情况下...调用你的事件处理程序可能会失败，因为你的函数在定时器调用它之前被破坏。

随着计时器，你必须永诺穿上页卸载，所以当你去到另一个页面获得停用或破坏时，页面被杀害，例如。

这种复杂的事情远远超过需要的和可怕的是在未来的更新。

为了确保定时器不会失败，我做就可以了这种丑陋的东西作为第一句：clearTimeout(MyTimer);

如果我需要计时重复每隔X毫秒......里面的功能我做setTimeout(function(){MyFunction();)

以这种方式，如果事情在不适当的情况下被销毁，则通过调用定时器处理程序不会导致错误。

而且在功能上的MyFunction里面每一句都必须错误controlated ......正在使用的任何对象必须确保存在......在每一句......这是IMPOSIBLE要做..所以一试捕绝被添加。

其他的事情可以做使用定时器时是忽略破坏的问题，让用户得到一个非常差的印象，当页面被卸载。

要确保没有计时器启动...我知道的唯一的事情是为身体onunload ...但一些丑陋的浏览器不会启动它（以避免程序员不让你去另一页）。 ..所以我必须做的事情，就好像onunload的不存在......因此定时器可以称为被摧毁对象时......可能出现的错误...百达

也是如此棘手，以确保没有错误窗口将带来而使用定时器起来：

var MyTimer; 
function MyTimer_Handler(){ 
try{ 
    clearTimeout(TemporizadorCapaLogin); 
    try{ 
    // Do whatever the timer must do 
    }Catch(theError){ 
    // Your own code to control errors, but have in mind that while running the lines you write here can also cause error because while running this the objects get destroyed, so better not to put anything 
    } 
    MyTimer=setTimeout(function(){try{MyTimer_Handler()}Catch(theError){}},theIntervalToRepeatInMiliseconds); 
}Catch(theError){} 
} 
try{MyTimer=setTimeout(function(){try{MyTimer_Handler()}Catch(theError){}},theIntervalToRepeatInMiliseconds);}Catch(theError){} 

看，我说什么......太丑陋的代码......但需要所有改掉，否则某些浏览器可以显示一条错误消息告诉一些不è在卸载页面发生时出现xists。

那么它也是最糟糕的，要真正确保你可以以这样尝试：

var MyTimer; 
function MyTimer_Handler(){ 
try{ 
    clearTimeout(TemporizadorCapaLogin); 

    try{ 
    // Do only one sentence at a time 
    }Catch(theError){} // Ther is no way to ensure any line on Catch part can not cause an error because objects can have being destroyed before and while running this part 

    try{ 
    // Do only one sentence at a time 
    }Catch(theError){} // Ther is no way to ensure any line on Catch part can not cause an error because objects can have being destroyed before and while running this part 

    // Repeat for each sentence 

    MyTimer=setTimeout(function(){try{MyTimer_Handler()}Catch(theError){}},theIntervalToRepeatInMiliseconds); 
}Catch(theError){} 
} 
try{MyTimer=setTimeout(function(){try{MyTimer_Handler()}Catch(theError){}},theIntervalToRepeatInMiliseconds);}Catch(theError){} 

但尝试{}赶上{}这样的secuence是一样的分组都在一个...所以没有好处...正如你所看到的，定时器使用起来非常痛苦，只是因为没有办法确保不会发生错误。

原因是该secuence事件对某些浏览器：

1. 用户请求一个页面
2. 该页面下载
3. 页面激活定时器的链接
4. 用户点击或者只是关闭标签...这将导致页面卸载
5. 浏览器开始销毁，由目标对象
6. 所有之前是破坏计时器IR射击定时器
7. 代码运行，但某些对象不存在，已被销毁
8. 虽然这样的代码运行，浏览器继续destorying多个对象 （兼）

例如在执行一个计时器内的任何一行代码，JavaScript的经理可以摧毁一些浏览器，所以它将会失败，浏览器将显示一个模式窗口te灌装您的网页baddly编码，这句话也可以这么简单：alert('bla bla bla');

到现在我也没找到反正避免这种... execpt所有定时器上这样做：

var MyTimer; 
function MyTimer_Handler(){ 
try{ 
    clearTimeout(TemporizadorCapaLogin); 
    try{ 
    // Do whatever the timer must do 
    }Catch(theError){} 
    MyTimer=setTimeout(function(){try{MyTimer_Handler()}Catch(theError){}},theIntervalToRepeatInMiliseconds); 
}Catch(theError){} 
} 
try{MyTimer=setTimeout(function(){try{MyTimer_Handler()}Catch(theError){}},theIntervalToRepeatInMiliseconds);}Catch(theError){} 

而且它既不是一个完美的解决方案......如果浏览器只是在定时器被触发但在fisrt尝试之前（接近完美毫秒sycn争用条件）销毁JavaScript管理器，它也会导致浏览器显示消息。

但有时候，有些事情，但一段时间后会做...没有一个更好的/完美的解决方案，这是我能做的最好的！

我个人很讨厌这种编码不好的浏览器（其中之一就是IE），但我必须支持它们！