✔ JavaScript/jQuery Einfügen-Operation erkennen

Das mit der übergabe eines Funktions-Objekts habe ich mir auch schon gedacht. Wie könnte ich es machen das ich auch mehrere inputs behandeln kann. Ich nehmen an ich müsste verschiede Objekte erstellen, oder?
 
HTML: 
<html>
<head>
    <script type="text/javascript">
		function observePaste(elem, callback) {

                        //Entweder die ID oder ein DOM Element als Parameter
			if(typeof elem === 'string') {
				elem = document.getElementById(elem);
			}
			
			var pasted = false;
			
			elem.onpaste = function() {
				pasted = true;
			};
			
			elem.oninput = function() {
				if(pasted) {
					pasted = false;
					callback.call(elem);
				}
			};
		}
		
		window.onload = function() {
			observePaste('text1', function() {
				alert(this.value);
			});
			
			observePaste(document.getElementById('text2'), function() {
				alert(this.value);
			});
		};
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input id="text1" type="text" value="Text field 1" />
    <input id="text2" type="text" value="Text field 2" />
</body>
</html>

Und da ich die Callback Funktion im Kontext des jeweiligen Elementes ausführe, kannst du auch für mehrere Inputs die gleiche Callback Funktion benutzen.

Javascript: 
window.onload = function() {
	function afterPaste() {
		alert(this.value);
	}
	
	observePaste('text1', afterPaste);
	
	observePaste(document.getElementById('text2'), afterPaste);
};
 
Danke für dein Code!

Kannst du mir sagen warum das hier nicht funktioniert?
Javascript: 
window.onload = function() {
			var paste1 = new paste();
			paste1.observe("text1");
			var paste2 = new paste();
			paste2.observe("text2");
		};
 
Ok, ich sehe schon ich muss mich mehr mit JavaScript beschäftigen.

Ich habe jetzt zwei Lösungen, einmal deine und eine minimal abgeänderte:
Javascript: 
		var paste = {
			observe: function(element, callback) {
				var isPasting = false;
				element = document.getElementById(element);
				
				element.onpaste = function() {
					this.isPasting = true;
				};
				element.oninput = function(event) {
					if(this.isPasting) {
						this.isPasting = false;
						callback.call(element);
					}
				};
			}
		};
		
		var observePaste = function(element, callback) {
			isPasting = false;
			
			if(typeof element === 'string') {
				element = document.getElementById(element);
			}
			
			element.onpaste = function() {
				this.isPasting = true;
			};
			
			element.oninput = function(event) {
				if(this.isPasting) {
					this.isPasting = false;
					callback.call(element);
				}
			};
		};
		
		var onPaste = function() {
			//alert("pasting on " + event.target.id + "!: " + event.target.value);
			alert(this.value);
		};
		
		window.onload = function() {
			paste.observe("text1", onPaste);
			paste.observe("text2", onPaste);
			
			//observePaste("text1");
			//observePaste("text2");
		};

Was mir an meiner Lösung gefällt ist die kapselung, auch wenn nur optisch. Sollte noch ein observe für Cut-Operationen hinzukommen wird alles im observe-Onjekt (zZ noch paste) gekapselt. Ist aber eher Geschmackssache denke ich.

Was noch nicht klappt ist die Übergabe des event-Objekts an den Callback. Muss man hier auf etwas bestimmtes achten?
 
zer0 hat gesagt.:
Was noch nicht klappt ist die Übergabe des event-Objekts an den Callback. Muss man hier auf etwas bestimmtes achten?
Zum Vergrößern anklicken....

Eigentlich ganz einfach wie bei jeder Parameterübergabe.

Javascript: 
element.oninput = function(event) {
    if(this.isPasting) {
        this.isPasting = false;
        callback.call(element, event);
    }
};


Javascript: 
var onPaste = function(evt) {
    
};
 
Ok, das musst du mir jetzt aber erklären. Bei mir ging es nicht weil ich bei call lediglich event mit übergab. Also: callback.call(event); jedoch wenn ich das mache wie bei dir geht es. Aber ich habe den callback doch nur mit einem Parameter gekennzeichnet?
 
zer0 hat gesagt.:
Ok, das musst du mir jetzt aber erklären. Bei mir ging es nicht weil ich bei call lediglich event mit übergab. Also: callback.call(event);
Zum Vergrößern anklicken....

Normalerweise würdest du ja einfach callback(event); schreiben. Das wäre dann ein Funktionsaufruf mit Parameterübergabe. ABER wir wollen die callback Funktion im Kontext des Elementes ausführen (this soll in der Funktion auf das Element zeigen). Deshalb führen wir die Funktion aus, in dem wir die call-Methode der Funktion aufrufen (Funktionen sind Objekte). Und der erste Parameter ist eben der Kontext. Erst das, was du als zweiten Parameter in call reinsteckst, kommt bei der Funktion als Parameter an.

zer0 hat gesagt.:
Aber ich habe den callback doch nur mit einem Parameter gekennzeichnet?
Zum Vergrößern anklicken....

Es gibt in JavaScript keine festen Parameterlisten. Du kannst jeder Funktion beliebig viele oder wenige Parameter übergeben. Aus diesem Grund existiert innerhalb der Funktion ein Array-Objekt namens "arguments", mit dem du zusätzlich auf die Parameter zugreifen kannst.

Javascript: 
function foo(a, b) {
	alert(a === arguments[0]);
	alert(b === arguments[1]);
	alert(arguments[2]);
}

foo('bar', 'baz', 'foobar');
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück