У меня есть простое прошлое событие как
document.getElementById('paste_area').addEventListener('paste', function() {
document.getElementById('notice').innerHTML='Text was successfully pasted!';
alert('Pasted');
}, true);
Рабочий пример можно найти здесь http://jsfiddle.net/XEQzz/
Перед вставкой появится предупреждение и уведомление. Как я могу задержать действие предупреждения, которое должно произойти после того, как было завершено вставное событие?
Вы можете разместить свое оповещение в setTimeout.
setTimeout(function() {alert('Pasted');}, 0);
Это задерживает код до тех пор, пока значение не будет обновлено.
Просто имейте в виду, что this в обратном вызове setTimeout будет иметь другое значение, чем в окружной среде.
Если вам понадобится ссылка на внешний this, который будет элементом, то ссылайтесь на него в переменной...
var self = this;
setTimeout(function() {alert(self.value);}, 0);
Или используйте .bind() (поддерживается в большинстве браузеров, поддерживающих addEventListener. Старое Safari не поддерживало его.)...
setTimeout(function() {alert(this.value);}.bind(this), 0);
setTimeout кажется лучшим вариантом, и вы можете использовать что-то вроде этого для обобщения
//определение объекта
function PasteMonitor(element)
{
if(typeof element == "string")
{
this.target = document.getElementById(element);
}
else if(typeof element == "object" || typeof element == "function")
{
this.target = element;
}
if(this.target != null && this.target != undefined)
{
this.target.addEventListener('paste',this.inPaste.bind(this),false);
this.target.addEventListener('change',this.changed.bind(this),false);
}
this.oldstate = "";
}
PasteMonitor.prototype = Object.create({},{
pasted:{ value: false, enumerable: true, configurable: true, writable: true },
changed:{ value: function(evt){
//elements content is changed
if(typeof this.onChange == "function")
{
this.onChange(evt);
}
if(this.pasted)
{
if(typeof this.afterPaste == "function")
{
this.afterPaste(evt);
this.pasted = false;
}
}
}, enumerable: true, configurable: true, writable: true },
inPaste:{ value: function(evt){
var cancelPaste = false;
if(typeof this.beforePaste == "function")
{
// process pasted data
cancelPaste = this.beforePaste(evt);
}
if(cancelPaste == true)
{
evt.preventDefault();
return false;
}
this.pasted = true;
setTimeout(function(){
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
this.target.dispatchEvent(evt);
}.bind(this),0);
}, enumerable: true, configurable: true, writable: true }
})
PasteMonitor.prototype.constructor = PasteMonitor;
//Использование PasteMonitor
//var element = document.getElementById('paste_area');
var msgArea = document.getElementById('message');
var myMonitor = new PasteMonitor("paste_area");
//or use and object as argument => var myMonitor = new PasteMonitor(element);
myMonitor.onChange = function(evt){
if(this.pasted)
{
//do something on paste change
msgArea.innerHTML = "onChange by paste";
this.oldstate = this.target.value;
}
//check to prevent processing change event when the element loses focus if the change is done by paste
else if(this.target.value != this.oldstate)
{
msgArea.innerHTML = "onChange by typing";
}
};
myMonitor.afterPaste = function(evt){
// do something after paste
msgArea.innerHTML = "afterPaste";
};
myMonitor.beforePaste = function(evt){
// do something before the actual paste
msgArea.innerHTML = "beforePaste";
//return true to prevent paste
return false;
};
Для обновления собственного значения
$(".number").on("paste", function (e) {
var Value = e.originalEvent.clipboardData.getData('text');
var Self=this
setTimeout(function () {
if (Value != Value.replace(/[^\d\.]/g, "")) {
$(Self).val(Value.replace(/[^\d\.]/g, ""));
}
}, 0);
});