Combat réel HTML5 et analyse des événements du presse-papiers

De nombreux sites Web affichent des invites pertinentes concernant le presse-papiers lors du copier-coller. Lorsque j'ai commencé à travailler en tant qu'ingénieur front-end, je me demandais encore comment cela était réalisé. Désormais, nous n’avons plus à nous poser de questions, car les navigateurs ont déjà intégré dans leurs standards les événements liés au presse-papiers.

IE est le premier navigateur à prendre en charge les événements liés au presse-papiers et à accéder aux données du presse-papiers via JavaScript. L'implémentation d'IE est devenue la norme de facto, et par la suite Firefox 3, Chrome et Safari 2 ont tous pris en charge des événements et un accès au presse-papiers similaires, mais Opera n'a pas pris en charge l'accès au presse-papiers via JavaScript. Jusqu'à l'arrivée de HTML5, les événements liés au presse-papiers étaient inclus dans la spécification HTML5. Vous trouverez ci-dessous les 6 événements du presse-papiers.

　beforecopy : Déclenché avant que l'opération de copie ne se produise ;

　copy : Déclenché lorsque l'opération de copie se produit ;

　beforecut : Déclenché avant que l'opération de découpe ne se produise ;

　cut : Déclenché lorsque l'opération de découpe se produit

　beforepaste : Déclenché avant ; l'opération de collage se produit ;

　coller : Déclenché lorsque l'opération de collage se produit.

Puisqu'il n'existe pas de norme pour les opérations du presse-papiers, ces événements et objets associés varient d'un navigateur à l'autre. Dans Firefox, Chrome et Safari, les événements beforecopy, beforecut et beforepaste ne se déclencheront que lorsque le menu contextuel de la zone de texte est affiché (en attendant un événement du presse-papiers). Mais IE déclenchera ces événements avant de déclencher les événements copier, couper et coller. Quant aux événements copier, couper et coller, tous les navigateurs les déclencheront tant que l'option correspondante est sélectionnée dans le menu contextuel (menu contextuel) ou que la combinaison de touches du clavier correspondante telle que (ctrl v) est utilisée.

Avant que l'événement réel ne se produise, les événements beforecopy, beforecut et beforepaste peuvent être utilisés pour modifier les données avant d'envoyer des données au presse-papiers ou d'obtenir des données du presse-papiers. Cependant, l'annulation de ces événements n'annulera pas l'opération sur le presse-papiers. Seule l'annulation des événements copier, couper et coller peut empêcher les opérations correspondantes de se produire.

Pour accéder aux données du presse-papiers, vous pouvez utiliser l'objet clipboardData : dans IE, l'objet clipboardData est une propriété de l'objet window ; dans Chrome, Safari et Firefox 4, l'objet clipboardData est une propriété de la paire d'événements correspondante. Cependant, dans Chrome, Safari et Firefox 4, l'objet clipboardData n'est valide que lors de la gestion des événements du presse-papiers pour empêcher tout accès non autorisé au presse-papiers dans IE, l'objet clipboardData est accessible à tout moment. Pour garantir la compatibilité entre navigateurs, il est préférable d’utiliser cet objet uniquement lors des événements du presse-papiers.

Cet objet clipboardData a trois méthodes : la méthode getData(), la méthode setData() et la méthode clearData(). Parmi elles, la méthode getData() est utilisée pour obtenir des données du presse-papiers. Elle reçoit un paramètre, qui est le format de données à obtenir. Dans IE, il existe deux formats de données : « texte » et « URL ». Dans Chrome, Safari et Firefox 4, ce paramètre est de type MIME, mais vous pouvez utiliser « texte » pour représenter « texte/plain ». 🎜>

Le premier paramètre de la méthode setData() est également le type de données, et le deuxième paramètre est le texte à placer dans le presse-papiers. Pour le premier paramètre, IE prend toujours en charge "texte" et "URL". Dans Chrome et Safari, les types MIME sont toujours pris en charge. Cependant, contrairement à la méthode getData(), la méthode setData() dans Chrome et Safari ne peut pas reconnaître le type « texte » s'il est dans le presse-papiers, sinon il retournera vrai ; il retournera false Cela dit, regardons le petit exemple suivant

Code JavaScript Le getClipboardText(. ) ici est relativement simple. Il suffit de déterminer la position de l'objet clipboardData, puis d'appeler la méthode getData() avec le type "text". En conséquence, la méthode setClipboardText() est un peu plus compliquée. objet clipboardData, vous devez transmettre différents types pour la méthode setData() en fonction des différentes implémentations du navigateur (pour Chrome et Safari, c'est "text/plain" ; pour IE, c'est "text") . 🎜> Avoir accès au presse-papiers est utile lorsque vous devez vous assurer que le texte que vous collez dans une zone de texte contient certains caractères ou est conforme à certaines exigences de formatage. Par exemple, si une zone de texte n'accepte que des valeurs numériques, vous devez alors vérifier. la valeur collée pour garantir qu'elle est valide. Dans l'événement coller, vous pouvez déterminer si la valeur dans le presse-papiers est valide. Si elle n'est pas valide, vous pouvez annuler le comportement par défaut comme dans l'exemple suivant >

. Code HTML

//获取剪贴板数据方法
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);	}
};

　Code JavaScript

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

Ici, le gestionnaire d'événements onpaste garantit que seules les valeurs numériques seront collées dans la zone de texte si la valeur du presse-papiers correspond. Si l'expression régulière ne correspond pas. , l'opération de collage sera annulée. Chrome, Firefox et Safari autorisent uniquement l'accès à la méthode getData() dans le gestionnaire d'événements onpaste.

Étant donné que tous les navigateurs ne prennent pas en charge l'accès au presse-papiers, une approche plus simple consiste à bloquer une ou plusieurs opérations du presse-papiers. Dans les navigateurs prenant en charge les événements copier, couper et coller (Firefox 3, Safari, Chrome et IE), il est facile d'empêcher le comportement par défaut de ces événements. Dans Opera, vous devez empêcher les frappes qui déclenchent ces événements, et vous devez également empêcher l'affichage du menu contextuel (menu contextuel) dans la zone de texte.

Bien que les événements liés au presse-papiers aient été inclus dans la spécification HTML5, Opera ne prend toujours pas en charge les événements liés au presse-papiers, donc l'application pratique reste un casse-tête. Ceci conclut l'introduction de l'événement presse-papiers du combat et de l'analyse réels HTML5. Pour des connaissances plus pertinentes sur HTML5, veuillez prêter attention aux mises à jour pertinentes de Menglong Station.

Ce qui précède est le contenu du combat réel HTML5 et de l'analyse des événements du presse-papiers. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !