Tatsächlicher HTML5-Kampf und Analyse von Ereignissen in der Zwischenablage

Auf vielen Websites werden beim Kopieren und Einfügen relevante Hinweise zur Zwischenablage angezeigt. Als ich anfing, als Front-End-Ingenieur zu arbeiten, fragte ich mich noch, wie das erreicht wurde. Jetzt müssen wir uns nicht mehr wundern, denn Browser haben Ereignisse im Zusammenhang mit der Zwischenablage bereits in Standards integriert.

IE ist der erste Browser, der Zwischenablage-bezogene Ereignisse unterstützt und über JavaScript auf Zwischenablagedaten zugreift. Die IE-Implementierung wurde zum De-facto-Standard, und später unterstützten Firefox 3+, Chrome und Safari 2+ alle ähnliche Ereignisse und den Zugriff auf die Zwischenablage, Opera unterstützte jedoch keinen Zugriff auf die Zwischenablage über JavaScript. Bis zur Einführung von HTML5 wurden Ereignisse im Zusammenhang mit der Zwischenablage in die HTML5-Spezifikation integriert. Nachfolgend finden Sie die 6 Ereignisse in der Zwischenablage.

　beforecopy: Wird ausgelöst, bevor der Kopiervorgang ausgeführt wird;

　copy: Wird ausgelöst, wenn der Kopiervorgang ausgeführt wird;

　beforecut: Wird vor dem Schneidvorgang ausgelöst;

　cut: Wird ausgelöst, wenn der Schneidvorgang erfolgt;

　beforepaste: Wird vor dem Schneidvorgang ausgelöst Der Einfügevorgang wird ausgeführt.

　Einfügen: Wird ausgelöst, wenn der Einfügevorgang ausgeführt wird.

Da es keinen Standard für Zwischenablagevorgänge gibt, variieren diese Ereignisse und zugehörigen Objekte von Browser zu Browser. In Firefox, Chrome und Safari werden die Ereignisse „beforecopy“, „beforecut“ und „beforepaste“ nur ausgelöst, wenn das Kontextmenü für das Textfeld angezeigt wird (in Erwartung eines Zwischenablageereignisses). Aber der IE löst diese Ereignisse aus, bevor er die Ereignisse zum Kopieren, Ausschneiden und Einfügen auslöst. Die Ereignisse Kopieren, Ausschneiden und Einfügen werden von allen Browsern ausgelöst, sofern die entsprechende Option im Kontextmenü (Rechtsklick-Menü) ausgewählt oder die entsprechende Tastenkombination auf der Tastatur wie (Strg+V) verwendet wird.

Bevor das eigentliche Ereignis eintritt, können die Ereignisse beforecopy, beforecut und beforepaste verwendet werden, um die Daten zu ändern, bevor Daten an die Zwischenablage gesendet oder Daten aus der Zwischenablage abgerufen werden. Durch das Abbrechen dieser Ereignisse wird der Vorgang in der Zwischenablage jedoch nicht abgebrochen. Nur das Abbrechen der Kopier-, Ausschneide- und Einfügeereignisse kann verhindern, dass die entsprechenden Vorgänge ausgeführt werden.

Um auf die Daten in der Zwischenablage zuzugreifen, können Sie das ClipboardData-Objekt verwenden: Im IE ist das ClipboardData-Objekt eine Eigenschaft des Fensterobjekts; in Chrome, Safari und Firefox 4+ ist das ClipboardData-Objekt eine Eigenschaft des entsprechenden Ereignispaares. In Chrome, Safari und Firefox 4+ ist das ClipboardData-Objekt jedoch nur während der Verarbeitung von Zwischenablageereignissen gültig. Dies dient dazu, einen unbefugten Zugriff auf die Zwischenablage im IE zu verhindern. Um die browserübergreifende Kompatibilität sicherzustellen, verwenden Sie dieses Objekt am besten nur bei Zwischenablageereignissen.

Dieses ClipboardData-Objekt verfügt über drei Methoden: die Methode getData(), die Methode setData() und die Methode clearData(). Unter anderem wird die Methode getData() verwendet, um Daten aus der Zwischenablage abzurufen. Sie empfängt einen Parameter, der das abzurufende Datenformat darstellt. Im IE gibt es zwei Datenformate: „Text“ und „URL“. In Chrome, Safari und Firefox 4+ ist dieser Parameter ein MIME-Typ. Sie können jedoch „Text“ verwenden, um „Text/Plain“ darzustellen.

Der erste Parameter der setData()-Methode ist auch der Datentyp und der zweite Parameter ist der Text, der in die Zwischenablage gelegt werden soll. Für den ersten Parameter unterstützt IE weiterhin „Text“ und „URL“. . In Chrome und Safari wird der MIME-Typ jedoch weiterhin unterstützt. Im Gegensatz zur getData()-Methode kann der Typ „text“ in Chrome und Safari jedoch nicht erfolgreich erkannt werden wird „true“ zurückgeben; andernfalls wird es „false“ zurückgeben. Schauen wir uns jedoch das folgende kleine Beispiel an:

🎜> Die Methode getClipboardText() ist hier relativ einfach. Sie muss nur die Position des ClipboardData-Objekts bestimmen und dann die Methode getData() entsprechend mit dem Typ „text“ aufrufen, die Methode setClipboardText() ist etwas mehr kompliziert. Nachdem Sie das ClipboardData-Objekt erhalten haben, müssen Sie je nach Browser-Implementierung unterschiedliche Typen für die setData()-Methode übergeben (für Chrome und Safari ist es „text/plain“; für IE ist es „text“). . Der Zugriff auf die Zwischenablage ist nützlich, wenn Sie sicherstellen müssen, dass der in das Textfeld eingefügte Text bestimmte Zeichen enthält oder bestimmten Formatierungsanforderungen entspricht, beispielsweise wenn ein Textfeld nur numerische Werte akzeptiert. , dann müssen Sie den eingefügten Wert überprüfen, um sicherzustellen, dass er gültig ist. Wenn er ungültig ist, können Sie das Standardverhalten wie im folgenden Beispiel abbrechen HTML-Code

//获取剪贴板数据方法
function getClipboardText(event){	var clipboardData = event.clipboardData || window.clipboardData;	return clipboardData.getData("text");
};


//设置剪贴板数据
function setClipboardText(event, value){	if(event.clipboardData){		
return event.clipboardData.setData("text/plain", value);	
}else if(window.clipboardData){		
return window.clipboardData.setData("text", value);	}
};

　

JavaScript-Code

<input type="text" id="inp" value="梦龙小站" />

Hier sorgt der Onpaste-Ereignishandler dafür, dass nur numerische Werte in das Textfeld eingefügt werden, wenn der Wert aus der Zwischenablage stammt Wenn es nicht mit dem regulären Ausdruck übereinstimmt, wird der Einfügevorgang abgebrochen. Chrome, Firefox und Safari erlauben nur den Zugriff auf die getData()-Methode im Onpaste-Ereignishandler.

Da nicht alle Browser den Zugriff auf die Zwischenablage unterstützen, besteht ein einfacherer Ansatz darin, einen oder mehrere Vorgänge in der Zwischenablage zu blockieren. In Browsern, die das Kopieren, Ausschneiden und Einfügen von Ereignissen unterstützen (Firefox 3+, Safari, Chrome und IE), ist es einfach, das Standardverhalten dieser Ereignisse zu verhindern. In Opera müssen Sie Tastenanschläge verhindern, die diese Ereignisse auslösen, und Sie müssen auch verhindern, dass das Kontextmenü (Rechtsklick-Menü) im Textfeld angezeigt wird.

Obwohl Ereignisse im Zusammenhang mit der Zwischenablage in die HTML5-Spezifikation aufgenommen wurden, unterstützt Opera immer noch keine Ereignisse im Zusammenhang mit der Zwischenablage, sodass die praktische Anwendung immer noch Kopfschmerzen bereitet. Damit ist die Einführung in die Zwischenablage des tatsächlichen HTML5-Kampfes und der HTML5-Analyse abgeschlossen. Weitere relevante Informationen zu HTML5 finden Sie in den entsprechenden Updates von Menglong Station.

Das Obige ist der Inhalt des tatsächlichen HTML5-Kampfes und der Analyse von Zwischenablageereignissen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!