Javascript Girl
  1. Javascript Girl
  3. Utilisation de document.write dans le gestionnaire d'événements?
Intereting Posts
Convertir ISO-8859-1 en UTF-8 Valeur de retour de chrome.webRequest.onBeforeRequest en fonction des données dans chrome.storage Validation des boutons radio avec Javascript ASP.Net – Javascript dans AJAX UpdatePanel Comment montrer les mariages dans un «arbre-famille» basé sur d3.js? Comment puis-je interpréter les chaînes dans textarea avec JavaScript / jQuery? Fade in div on page load Téléchargement et aperçu de l'image multiple Comment faire pour obtenir selectize.js avec meteor.js Obtenir un contenu en texte brut d'élément HTML avec HTML non interprété Comment arrêter l'élément avec le premier événement onclick à déclencher lorsque la touche Entrée est pressée la première fois Comment puis-je retourner la réponse d'un appel Observable / http / async dans angular2? Comment dire entre des éléments de tableau indéfinis et des espaces vides? Uncaught TypeError: impossible de lire la propriété 'replace' of indefined In Grid Qu'est-ce qui ne va pas avec ce style de codage JavaScript? (Fermeture contre prototypes)

Utilisation de document.write dans le gestionnaire d'événements?

Je suis en train d'expérimenter avec HTML et JavaScript. Le code suivant devrait imprimer quelque chose lors de l'entrée d'une frappe dans une zone de texte: 

<html> <body> <input type="text" id="commandInput" name="command" size="50" /> <script type="text/javascript"> var commandInput = document.getElementById("commandInput"); commandInput.onkeydown = function (evt) { document.writeln("Test"); }; </script> </body> </html>

Pour une raison quelconque, la zone de texte disparaît lors de la saisie d'une frappe, ne laissant qu'une page blanche.

Des idées pour lesquelles cela se produit?

Vous ne devez pas utiliser document.write ou document.writeln après la chargement de la page. L'appelant après la chargement de la page (dans Firefox, au moins) nécessite un appel automatique vers document.open() , qui efface le document en cours.

Si vous l'utilisez comme un outil de débogage, je suggérerais d'utiliser Firebug et console.log() place.

Voici une méthode alternative, en utilisant .innerHTML pour insérer du texte dans un élément. 

 <html> <body> <input type="text" id="commandInput" name="command" size="50" /> <div id="text"></div> <script type="text/javascript"> var commandInput = document.getElementById("commandInput"); commandInput.onkeydown = function () { document.getElementById("text").innerHTML="Testing..."; }; </script> </body> </html>

Essayez à la place, à la place, de prendre les dernières saisies dans le nouveau champ.

Sur un sidenote, lancez-le dans un nouveau.html et vérifiez, peut-être vous intéresser si vous êtes en train de vous tromper, car il s'agit d'un effet assez cool. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>onkeyup</title> <script type="text/javascript"> function setFocus(){ document.theForm.command.focus(); } </script> </head> <body onload="setFocus()"> <form id="theForm"> <input type="text" id="commandInput" name="command" size="50" style="font-size:20px; color:gray; font-family:arial; border:0 none; opacity:0.4" /> <div id="text" style="position:absolute; float:left; margin-left:3px; margin-top:-26px; font-size:20px; font-family:arial; color:black;"></div> <script type="text/javascript"> var commandInput = document.getElementById("commandInput"); commandInput.onkeyup = function () { document.getElementById("text").innerHTML=commandInput.value; }; </script> </form> </body> </html>

Lorsque vous chargez la page, appuyez sur Tab et commencez à taper.