✔ JavaScript/jQuery Einfügen-Operation erkennen

Z

zer0

Erfahrenes Mitglied
Ich suche einen Weg mittels JavaScript oder jQuery eine Einfüge-Operation in ein Textfeld zuerkenn. Dabei soll sowohl STRG+V sowie der Einfügen-Button erkannt werden. Ausserdem natürlich der Mac OS X Pendant CMD+V.

Gibt es dafür schon fertige Lösungen?
 
Kommt drauf an, welche Browser du unterstützen willst. Es gibt das tolle "oninput" event. Im IE leider erst ab 9.
 
Dann nimm oninput für Opera, Chromium, Firefox und IE > 8 und bau etwas aus keydown, click oder setIntervall für IE <= 8.

Also im Prinzip kannst du es mit setIntervall ganz gut simulieren, genauso wie damit das onhashchange event nachgebaut wird, für Browser, die es nicht unterstützen.

So in etwa (nicht getestet)
HTML: 
<script type="text/javascript">
/* <![CDATA[ */

var elem = document.getElementById('foobar');

elem.oninput = function() {
    alert('Neuer Wert: ' + this.value);
};

/* ]]> */
</script>

<!--[if lte IE 8]>
<script type="text/javascript">
/* <![CDATA[ */

var oldValue = elem.value;

setIntervall(function() {
    if(oldValue !== elem.value) {
        oldValue = elem.value;
        elem.oninput.call(elem);
    }
}, 50);

/* ]]> */
</script>
<![endif]-->
 
Danke erstmal!

Das Event oninput feuert aber bei jedem change. Ich suche jedoch eine Lösung die nur auf Einfüge-Operationen reagiert. Habe herausgefunden das es dafür das onpaste-Event gibt, nur leider feuert das vor dem Einfügen. Besser wäre danach, oder das mir das Event wenigstens den neuen Content mitteilt.

Das ist mein Code:
Code: 
<html>
<head>
    <script type="text/javascript">
            // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnPaste (event) {
            alert ("The new content: " + event.target.value);
        }
        
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" onpaste="OnPaste (event)" value="Text field" />
</body>
</html>
 
https://developer.mozilla.org/en/DOM/element.onpaste

There is currently no DOM-only way to obtain the text being pasted; you'll have to use an nsIClipboard to get that information.
Zum Vergrößern anklicken....


Also musst du das wohl etwas verzögert auslesen.

HTML: 
<html>
<head>
	<script type="text/javascript">
	// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
	function OnPaste (e) {
		var _this = this;
		
		setTimeout(function() {
			alert(_this.value);
		});
	}
	</script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" onpaste="OnPaste.call(this, event)" value="Text field" />
</body>
</html>

Aber jetzt kannst du z.B. nicht das Einfügen verhindern als Reaktion auf den neuen Inhalt. Müsstest du dir den alten merken und evtl. dann zurücksetzen.
 
Hab mir jetzt mal meine eigene Lösung gebaut. Funktioniert zwar, aber nur wenn ich die Events in den input-Tags per onpaste und oninput angebe. Meine Lösung mit paste.observe("elementId"); klappt noch nicht.

Hier ist mein code:
HTML: 
<html>
<head>
    <script type="text/javascript">
		var paste = {
			isPating: false,
			
                        // geht nicht mit paste.observe("text");
			observe: function(element) {
				var el = document.getElementById(element);
				el.onpaste = this.onPaste();
				el.oninput = this.onInput();
			},
			
			onPaste: function() {
				isPasting = true;
			},
			
			onInput: function(event) {
				if(isPasting) {
					isPasting = false;
					alert("pasting!: " + event.target.value);
				}
			}
		};
		
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input id="text" type="text" onpaste="paste.onPaste();" oninput="paste.onInput(event);" value="Text field" />
</body>
</html>
 
Die Klammern müssen weg

Javascript: 
el.onpaste = this.onPaste;
el.oninput = this.onInput;

Edit: Und ein typo "isPating"
 
Okay, jetzt geht alles! Vielen Dank! :)

Das ist meine Lösung:
HTML: 
<html>
<head>
    <script type="text/javascript">
		var paste = {
			isPasting: false,
			
			observe: function(element) {
				var el = document.getElementById(element);
				el.onpaste = this.onPaste;
				el.oninput = this.onInput;
			},
			
			onPaste: function() {
				this.isPasting = true;
			},
			
			onInput: function(event) {
				if(this.isPasting) {
					this.isPasting = false;
					alert("pasting!: " + event.target.value);
				}
			}
		};
		
		window.onload = function() {
			paste.observe("text");
		};
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input id="text" type="text" value="Text field" />
</body>
</html>

Kann man das als anständige Lösung durchgehen lassen, oder hast du noch verbesserungsvorschläge?

Am IE Support werden ich noch arbeiten! :)
 
Ich würde es noch erweitern, dass du der observe-Funktion zusätzlich eine Funktion übergibst, die beim Event aufgerufen wird. Im Moment müsstest du das Event ja innerhalb deines "paste" Objektes abhandeln, aber ich würd das allgemeiner halten. Außerdem hast du ein Problem bei mehr als einem input.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück